#B1CBBF

シアン、エメラルド系の色

#b1cbbf は「シアン、エメラルド」系の色です。RGB(177, 203, 191)、HSL(152°, 20%, 75%)、CMYK(13%, 0%, 6%, 20%)。最も近い色名は silver。白背景とのコントラスト比は 1.73:1、黒背景は 12.16:1。濃淡、配色、色覚シミュレーションも確認できます。

カラーコード

HEX	`#b1cbbf`
RGB	`rgb(177 203 191)`
RGB (legacy)	`rgb(177, 203, 191)`
RGB %	`rgb(69% 80% 75%)`
HSL	`hsl(152 20% 75%)`
HSV / HSB	`hsv(152, 13%, 80%)`
HWB	`hwb(152 69% 20%)`
CMYK	`cmyk(13%, 0%, 6%, 20%)`
CIELAB (D50)	`lab(79.47 -10.83 2.9)`
LCH	`lch(79.47 11.21 165.02)`
OKLab	`oklab(0.8193 -0.0317 0.0079)`
OKLCH	`oklch(0.8193 0.0326 166.05)`
10進数	`11652031`

色の特性

色調	シアン、エメラルド
最も近い色名	silver ΔE 3.5
最も近いWebセーフカラー	#99cccc
色相	152°
彩度 (HSL / HSV)	20% / 13%
輝度 (HSL)	75%
明度 (HSV)	80%
明るさ (Rec.601 / Rec.709)	76% / 77%
相対輝度（WCAG）	0.5582
赤 / 緑 / 青	177 / 203 / 191

WCAG 2.2 コントラスト比

白背景 (#ffffff)

1.73:1

AA 通常 (4.5:1) · 基準未満AA 大きい文字 (3:1) · 基準未満AAA 通常 (7:1) · 基準未満

黒背景 (#000000)

12.16:1

AA 通常 (4.5:1) · 合格AA 大きい文字 (3:1) · 合格AAA 通常 (7:1) · 合格

カスタム比較 Aa Bb 123

APCA コントラスト Lc（参考値） — 文字色として白背景／黒背景: Lc 31.2 / -71.5 · 背景色として白文字／黒文字: Lc -35.1 / 72.6

明度スケール（OKLCH 50〜950）

同じ色相・彩度のまま明るさだけを均等に変えた11段階です。デザインシステムのカラートークンにそのまま使えます。

50#e4fcf1 100#d8f1e5 200#c7e0d4 300#b1cbbf 400#8fa69b 500#778c82 600#60746b 700#4b5d55 800#36473f 900#23322b 950#0f1b16

ティント（白を混ぜる）

0%#b1cbbf 10%#b9d0c5 20%#c1d5cc 30%#c8dbd2 40%#d0e0d9 50%#d8e5df 60%#e0eae5 70%#e8efec 80%#eff5f2 90%#f7faf9

シェード（黒を混ぜる）

0%#b1cbbf 10%#9fb7ac 20%#8ea299 30%#7c8e86 40%#6a7a73 50%#596660 60%#47514c 70%#353d39 80%#232926 90%#121413

配色パターン

色覚シミュレーション

色覚の多様性を持つ人には、この色が次のように見えると推定されます（Machado 2009）。

一般色覚#b1cbbf P型（1型）色覚#cac7be D型（2型）色覚#c5c4c0 T型（3型）色覚#accbc7 全色盲（明るさのみ）#c5c5c5

近い色名

silver · ΔE 3.5#c0c0c0 lightsteelblue · ΔE 5.4#b0c4de lightblue · ΔE 5.4#add8e6 lightgray · ΔE 5.8#d3d3d3 powderblue · ΔE 6.5#b0e0e6

CSSでの使い方

:root {
  --color-brand: #b1cbbf;
  --color-brand-oklch: oklch(81.93% 0.0326 166.05);
}
.text { color: var(--color-brand); }
.background { background-color: var(--color-brand); }
.border { border: 1px solid rgb(177 203 191 / 50%); }
/* Tailwind CSS */
<div class="bg-[#b1cbbf] text-[#b1cbbf] border-[#b1cbbf]">