色名 · #CEDCD6
Light White Box
Light White Boxは#CEDCD6：rgb(206 220 214)、hsl(154 17% 84%)、oklch(0.882 0.017 168.4)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Light White Box color name →
#CEDCD6
oklch(0.882 0.017 168.4)
カラー変換
- HEX
- #cedcd6
- RGB
- rgb(206 220 214)
- HSL
- hsl(154 17% 84%)
- HWB
- hwb(154 81% 14%)
- OKLCH
- oklch(0.882 0.017 168.4)
- OKLab
- oklab(0.882 -0.017 0.003)
- CIE Lab
- lab(86.56 -5.71 1.25)
- LCH
- lch(86.56 5.84 167.6)
- CMYK
- cmyk(6% 0% 3% 14%)
ティント · シェード · トーン
ティント
- D3DFDA
- D8E3DE
- DDE6E2
- E1EAE6
- E6EDEA
- EBF1EE
- F0F4F3
- F5F8F7
- FAFBFB
シェード
- B3BFBA
- 98A39E
- 7F8884
- 666E6A
- 4E5452
- 383C3B
- 232625
- 0F1110
- 020202
トーン
- C6D2CD
- BEC9C4
- B6BFBB
- AEB6B3
- A6ADAA
- 9EA4A1
- 979B99
- 8F9291
- 888988
カラーハーモニー
補色 +180°
- CEDCD6
Light White Box
- E1D4DA
≈ Velvet Blush
類似色 -30° +30°
- CEDCD6
Light White Box
- D3DBD0
≈ Light Silver Grass
- CCDCDC
≈ Beach House Blue
トライアド +120° +240°
- CEDCD6
Light White Box
- D7D7E3
≈ So Blue-Berry
- E2D5CF
≈ Pandora Grey
スプリットコンプリメンタリー +150° +210°
- CEDCD6
Light White Box
- DDD5E0
≈ Titan White
- E3D4D4
≈ Theatre Powder Rose
テトラード +90° +180° +270°
- CEDCD6
Light White Box
- D1D9E4
≈ So Blue-Berry
- E1D4DA
≈ Velvet Blush
- DED7CC
≈ Quiet Interlude
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.41:1 · APCA Lc 20
Ag
AAA黒の上
WCAG 14.83:1 · APCA Lc 83
最適な文字色: #000000
WCAG 14.83:1 (AAA) · APCA Lc 83
Contrast pairs
コードスニペット
CSS
:root {
--light-white-box: #cedcd6;
--light-white-box-rgb: 206 220 214;
--light-white-box-oklch: oklch(0.882 0.017 168.4);
}
.element {
color: var(--light-white-box);
background-color: hsl(154 17% 84%);
border-color: oklch(0.882 0.017 168.4);
}Tailwind CSS v4
@theme {
--color-light-white-box: #cedcd6;
--color-light-white-box-50: #f1f7f4;
--color-light-white-box-100: #e3eae7;
--color-light-white-box-200: #cdd7d3;
--color-light-white-box-300: #afbab6;
--color-light-white-box-400: #95a29c;
--color-light-white-box-500: #7c8a84;
--color-light-white-box-600: #697570;
--color-light-white-box-700: #545d59;
--color-light-white-box-800: #3d4441;
--color-light-white-box-900: #2a2f2d;
--color-light-white-box-950: #181c1a;
}SCSS
$light-white-box: #cedcd6;
$light-white-box-rgb: 206, 220, 214;
$light-white-box-light: mix(#fff, $light-white-box, 20%);
$light-white-box-dark: mix(#000, $light-white-box, 20%);
.element {
color: $light-white-box;
box-shadow: 0 0 0 2px rgba($light-white-box, 0.35);
}