カラー・CSS ツール
デザイナーは HEX を渡し、コードは α 値つきの RGB を求める。その間の写し取りにこそ、まちがいは棲んでいます。
- カラーコード変換 #1f5fd6、1f5fd6、#1f5、rgb(31, 95, 214) など、よくある書き方で色を入力すると、ほかの表記が一度に表示されます。読みやすい文字色を決めるためのコントラスト比も…
- HEX を RGB に変換 HEX コードを貼り付ければ RGB の各チャンネルが読み取れます。#1f5fd6 は rgb(31, 95, 214) になり、アルファ値を含むコードなら透過を保った rgba() が得ら…
- RGB を HEX に変換 rgb(31, 95, 214) を貼り付ければ（カンマでも空白でも構いません）#1f5fd6 が得られます。CSS にもデザインファイルにもスタイルガイドにもそのまま使えます。
- カラーパレット生成ツール 基準になる色を選ぶと、残りは色相環に沿って計算されます。色をクリックするとコードがコピーされ、写真を読み込めばその写真から配色をそのまま取り出せます。
- CSS グラデーション作成ツール スライダーを動かすと、上のパネルがその場で変わります。気に入ったら 1 行をコピーしてスタイルシートに貼るだけです。
- CSS 影ジェネレーター スライダーを動かすと見本も一緒に変わります。影ひとつで足りないときはレイヤーを重ねてください。実際の画面にある柔らかく自然な奥行きは、こうして作られています。