[CSS+Javascript] CMYの減法混色をmix-blend-modeを使ってシミュレート

以前に書いた記事の続きに当たります。あるWEBアプリケーションのデモ開発を行った後、UIの一部、表題内容の処理部分をパーツとして分解し、JSFiddleとCodePenで公開しました。本記事はQiitaで公開した記事の要約版と補足になります。

[CSS+Javascript] 指定した段数でピラミッド状の要素リストを自動生成する

前提

本記事ではあくまでも実際のケースに沿った表現方法の一例として、mix-blend-modeを使った方法を紹介しています。シンプルにRGB→CMY変換、減法混色をしたい場合には、白（#FFFFFFもしくはRGB(255,255,255)）からの減算の方がロジックとして王道と思います。

目的

Ｃ、Ｍ、Ｙ、それぞれのカラーブロックを重ね、実際に混色した際の色をシミュレートします。ベースロジックのデモのため、それぞれの色成分初期値は濃度１００％（C→RGB(0,255,255)、M→RGB(255,0,255)、Y→RGB(255,255,0)）とし、濃度の調整はスライダーにより、３色同比率で増減させます。

つまり、結果的には単に見た目が黒から白への濃度変化するものになるのですが、その表現方法の構築が本記事でのメインとなります。

なお、当該のアプリケーションではＣ、Ｍ、Ｙ、個別の濃度調整スライダーを実装しています。また、それぞれの色成分初期値が、例えば、シアンの初期値（濃度１００％）はRGB(0, 255, 255)ではなく、RGB(65,225,210)という具合にクライアントによって変更できるようになっています。

技術的な話

概ね以下の通りです。

・Ｃ、Ｍ、Ｙ、それぞれについてDIV要素を設定（カラーブロック）、背景に初期値を設定

・カラーブロックを上下左右中央揃えにする（display: flex;justify-content: center;align-items: center;）

・カラーブロックを重ねる（position: absolute;）

・カラーブロック間の乗算処理（mix-blend-mode: multiply;）

カラーブロックをPhotoshopのレイヤーに見立て、乗算処理をしています。

なお、今回紹介した内容について、ソースコードを含めた詳細解説をQiitaにて公開しています。よろしければ訪問してみてください。

フロントエンドの表示・動作不具合の解析も行います

以下サービスよりご相談受付けております。