文字色・背景色の指定
colorbackground-color
CSSで色を指定する方法は多数あります。named color（色名）、hex（16進数）、rgb()、hsl()、そして最新のoklch()まで、それぞれ特徴と用途があります。
デモ：同じ色を異なる記法で指定
named
tomato
tomato
hex
#e05c45
#e05c45
rgb()
rgb(224,92,69)
rgb(224,92,69)
hsl()
hsl(8,72%,57%)
hsl(8,72%,57%)
oklch()
oklch(60% 0.18 28)
oklch(60% 0.18 28)
文字色のデモ
named: steelbluehex: #2563ebrgb()hsl()oklch()
透明度付きの背景色
rgba(37,99,235,0.15)
hsla(221,83%,53%,0.15)
oklch(55% 0.22 260 / 0.15)
コード例
/* 文字色 */
.text-named { color: tomato; }
.text-hex { color: #e05c45; }
.text-rgb { color: rgb(224, 92, 69); }
.text-hsl { color: hsl(8, 72%, 57%); }
.text-oklch { color: oklch(60% 0.18 28); }
/* 背景色 */
.bg-named { background-color: steelblue; }
.bg-hex { background-color: #2563eb; }
.bg-rgb { background-color: rgb(37, 99, 235); }
.bg-hsl { background-color: hsl(221, 83%, 53%); }
.bg-oklch { background-color: oklch(55% 0.22 260); }
/* 透明度付き */
.bg-rgba { background-color: rgba(37, 99, 235, 0.15); }
.bg-hsla { background-color: hsla(221, 83%, 53%, 0.15); }
.bg-oklch-a { background-color: oklch(55% 0.22 260 / 0.15); }
/* color-mix() で2色を混合 */
.mixed { color: color-mix(in oklch, blue 60%, red); }
/* color-scheme でダーク/ライト切替対応 */
:root { color-scheme: light dark; }比較：色の記法それぞれの特徴
| 記法 | 例 | 特徴 | 透明度 |
|---|---|---|---|
| named | tomato | 可読性が高い。約140色のみ | ❌ |
| hex | #e05c45 | 最も一般的。デザインツールで広く使用 | 4桁/#rrggbbaaで可能 |
| rgb() | rgb(224 92 69) | 0–255で直感的。/でアルファ値指定可能 | rgba() / スラッシュ記法 |
| hsl() | hsl(8 72% 57%) | 色相・彩度・明度で人間に直感的。調整しやすい | hsla() / スラッシュ記法 |
| oklch() ✨ | oklch(60% 0.18 28) | 知覚的に均一。明度が等しければ同じ明るさに見える | / スラッシュ記法 |
NEWoklch() と color-mix()（2023年〜主要ブラウザ対応）
oklch() は知覚的に均一な色空間で、明度・彩度・色相で色を指定します。同じ明度L値なら人間の目に同じ明るさに見えるため、アクセシブルなカラーパレット設計に優れています。
C=0.1
C=0.2
C=0.3
C=0.4
C=0.5
color-mix() は2つの色を指定した比率で混合します。
blue 100%
blue 75%
50% / 50%
red 75%
red 100%
/* oklch(明度% 彩度 色相) */
.oklch-blue { color: oklch(55% 0.22 260); }
.oklch-warm { color: oklch(70% 0.15 60); }
/* color-mix() で2色を混合 */
.mixed-50 { background-color: color-mix(in oklch, blue 50%, red); }
.tinted { background-color: color-mix(in srgb, currentColor 20%, white); }
/* color-scheme でOSのダーク/ライトモードに対応 */
:root { color-scheme: light dark; }🤖 AIプロンプトテンプレート
CSSのcolor・background-colorプロパティを使った文字色・背景色の実装例をReact + Tailwind CSSで作成してください。 要件: - color / background-color の基本 - 色の指定方法: HEX（#ff6b6b）/ RGB（rgb(255,107,107)）/ HSL（hsl(0,100%,71%)）/ CSS変数（--color-primary） - ダークモード対応: CSS変数とprefers-color-schemeを使った色の切り替え例 - テキストカラーのコントラスト比（アクセシビリティ）のデモ - currentColorキーワードの活用例 - カラーパレットを選択して文字色・背景色をリアルタイム変更できるインタラクティブデモ 色の種類と指定方法の違いを視覚的に理解できるデモにしてください。
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。
Zenn