色名 · #CFD4D3
Tsunami Sky
Tsunami Skyは#CFD4D3：rgb(207 212 211)、hsl(168 5% 82%)、oklch(0.866 0.006 183)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Tsunami Sky color name →
#CFD4D3
oklch(0.866 0.006 183)
カラー変換
- HEX
- #cfd4d3
- RGB
- rgb(207 212 211)
- HSL
- hsl(168 5% 82%)
- HWB
- hwb(168 81% 17%)
- OKLCH
- oklch(0.866 0.006 183)
- OKLab
- oklab(0.866 -0.006 0)
- CIE Lab
- lab(84.5 -1.9 -0.13)
- LCH
- lch(84.5 1.9 183.9)
- CMYK
- cmyk(2% 0% 0% 17%)
ティント · シェード · トーン
ティント
- D4D8D7
- D8DCDC
- DDE1E0
- E2E5E4
- E7E9E9
- ECEEED
- F0F2F2
- F5F6F6
- FAFBFB
シェード
- B4B8B7
- 999D9C
- 7F8382
- 676969
- 4F5151
- 383A3A
- 232424
- 101010
- 020202
トーン
- C7CBCA
- BFC3C2
- B7BAB9
- AFB1B1
- A7A9A9
- 9FA1A0
- 979898
- 8F9090
- 888888
カラーハーモニー
補色 +180°
- CFD4D3
Tsunami Sky
- D6D1D2
≈ Beluga Song
類似色 -30° +30°
- CFD4D3
Tsunami Sky
- D0D4D1
≈ Sterling
- CFD4D5
≈ Tsunami Sky
トライアド +120° +240°
- CFD4D3
Tsunami Sky
- D3D2D6
≈ Etude Lilac
- D6D2CF
≈ Santo
スプリットコンプリメンタリー +150° +210°
- CFD4D3
Tsunami Sky
- D5D1D4
≈ Etude Lilac
- D6D1D0
≈ Pygmy Goat
テトラード +90° +180° +270°
- CFD4D3
Tsunami Sky
- D1D3D7
≈ Rapunzel Silver
- D6D1D2
≈ Beluga Song
- D4D3CF
≈ Light Bleaches
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.49:1 · APCA Lc 23
Ag
AAA黒の上
WCAG 14.01:1 · APCA Lc 80
最適な文字色: #000000
WCAG 14.01:1 (AAA) · APCA Lc 80
Contrast pairs
コードスニペット
CSS
:root {
--tsunami-sky: #cfd4d3;
--tsunami-sky-rgb: 207 212 211;
--tsunami-sky-oklch: oklch(0.866 0.006 183);
}
.element {
color: var(--tsunami-sky);
background-color: hsl(168 5% 82%);
border-color: oklch(0.866 0.006 183);
}Tailwind CSS v4
@theme {
--color-tsunami-sky: #cfd4d3;
--color-tsunami-sky-50: #f3f6f5;
--color-tsunami-sky-100: #e6e8e8;
--color-tsunami-sky-200: #d2d5d4;
--color-tsunami-sky-300: #b4b8b8;
--color-tsunami-sky-400: #9b9f9f;
--color-tsunami-sky-500: #828786;
--color-tsunami-sky-600: #6e7372;
--color-tsunami-sky-700: #585c5b;
--color-tsunami-sky-800: #404342;
--color-tsunami-sky-900: #2c2e2e;
--color-tsunami-sky-950: #191b1b;
}SCSS
$tsunami-sky: #cfd4d3;
$tsunami-sky-rgb: 207, 212, 211;
$tsunami-sky-light: mix(#fff, $tsunami-sky, 20%);
$tsunami-sky-dark: mix(#000, $tsunami-sky, 20%);
.element {
color: $tsunami-sky;
box-shadow: 0 0 0 2px rgba($tsunami-sky, 0.35);
}