色名 · #B1C6D1
Opal Waters
Opal Watersは#B1C6D1：rgb(177 198 209)、hsl(201 26% 76%)、oklch(0.814 0.028 230.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Opal Waters color name →
#B1C6D1
oklch(0.814 0.028 230.4)
カラー変換
- HEX
- #b1c6d1
- RGB
- rgb(177 198 209)
- HSL
- hsl(201 26% 76%)
- HWB
- hwb(201 69% 18%)
- OKLCH
- oklch(0.814 0.028 230.4)
- OKLab
- oklab(0.814 -0.018 -0.021)
- CIE Lab
- lab(78.54 -5.68 -8.06)
- LCH
- lch(78.54 9.86 234.8)
- CMYK
- cmyk(15% 5% 0% 18%)
ティント · シェード · トーン
ティント
- B9CCD6
- C0D1DA
- C8D7DF
- D0DDE3
- D8E2E8
- DFE8EC
- E7EEF1
- EFF3F6
- F7F9FA
シェード
- 99ACB5
- 83929B
- 6C7A81
- 576268
- 424B50
- 2F3539
- 1C2123
- 0C0E10
- 010202
トーン
- ACBFC9
- A7B8C0
- A2B0B8
- 9DA9B0
- 98A2A8
- 939BA0
- 8F9498
- 8A8E90
- 858788
カラーハーモニー
補色 +180°
- B1C6D1
Opal Waters
- D2BEB3
≈ Summer Bloom
類似色 -30° +30°
- B1C6D1
Opal Waters
- AEC8C9
≈ Restful Retreat
- B8C3D5
≈ Virginia Blue
トライアド +120° +240°
- B1C6D1
Opal Waters
- D1BBC4
≈ Queen’s Tart
- C3C4B0
≈ Kangaroo
スプリットコンプリメンタリー +150° +210°
- B1C6D1
Opal Waters
- D4BCBB
≈ Embroidery
- CCC1AF
≈ Oyster Grey
テトラード +90° +180° +270°
- B1C6D1
Opal Waters
- CBBDCD
≈ My Mona
- D2BEB3
≈ Summer Bloom
- B9C7B6
≈ Pond’s Edge
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.76:1 · APCA Lc 33
Ag
AAA黒の上
WCAG 11.86:1 · APCA Lc 70
最適な文字色: #000000
WCAG 11.86:1 (AAA) · APCA Lc 70
Contrast pairs
コードスニペット
CSS
:root {
--opal-waters: #b1c6d1;
--opal-waters-rgb: 177 198 209;
--opal-waters-oklch: oklch(0.814 0.028 230.4);
}
.element {
color: var(--opal-waters);
background-color: hsl(201 26% 76%);
border-color: oklch(0.814 0.028 230.4);
}Tailwind CSS v4
@theme {
--color-opal-waters: #b1c6d1;
--color-opal-waters-50: #eef7fc;
--color-opal-waters-100: #dfeaf0;
--color-opal-waters-200: #c9d7de;
--color-opal-waters-300: #aabac3;
--color-opal-waters-400: #8fa2ac;
--color-opal-waters-500: #748a95;
--color-opal-waters-600: #62757e;
--color-opal-waters-700: #4f5d65;
--color-opal-waters-800: #39444a;
--color-opal-waters-900: #272f33;
--color-opal-waters-950: #151c1f;
}SCSS
$opal-waters: #b1c6d1;
$opal-waters-rgb: 177, 198, 209;
$opal-waters-light: mix(#fff, $opal-waters, 20%);
$opal-waters-dark: mix(#000, $opal-waters, 20%);
.element {
color: $opal-waters;
box-shadow: 0 0 0 2px rgba($opal-waters, 0.35);
}