色混色のクイックスタート

最初に成功させるために必要なすべて：何を入力し、どのオプションが重要で、結果をどう読むか。

色混色 — 入力 → 出力. 100% ブラウザ内で動作——データは端末から送信されません。

使い方

ツールを開き、左の入力欄にデータを貼り付けます。
タスクに本当に必要なオプションだけを設定します。ほとんどの場合、既定値で正しく動作します。
右の出力欄で結果を確認します。入力に応じてリアルタイムに更新されます。
「コピー」で結果を取得するか、「ダウンロード」でファイルとして保存します。

使い方 — 3

例

Mix against #ffffff at 50% and switch the space to CIE Lab for a perceptually even ramp.

入力

#0ea5b7

出力 — 検索結果

#0ea5b7 + #ffffff at 50% (mixed in RGB)

Result
  HEX   #87d2db
  RGB   rgb(135, 210, 219)
  HSL   hsl(186.4, 54.0%, 69.3%)

Contrast against white : 1.71:1
Contrast against black : 12.26:1

Ramp (9 steps)
    0%  #0ea5b7
   13%  #2cb0c0
   25%  #4abcc9
   38%  #68c7d2
   50%  #87d2db
   63%  #a5dde4
   75%  #c3e9ed
   88%  #e1f4f6
  100%  #ffffff

CSS
  --mix: #87d2db;
  background: linear-gradient(90deg, #0ea5b7, #ffffff);

実行

説明

Blend two colours in sRGB, HSL or perceptual CIE Lab and generate a ramp with contrast ratios.

色混色 → · 使い方 → · 色ツール →

色混色 のクイックスタート

使い方

例

実行

説明

関連ツール

色混色のクイックスタート