命名颜色 · #CCDDCC
Flip a Coin
Flip a Coin 即 #CCDDCC：rgb(204 221 204)、hsl(120 20% 83%)、oklch(0.88 0.029 145.3)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Gray mean? → · Flip a Coin color name →
#CCDDCC
oklch(0.88 0.029 145.3)
颜色转换
- HEX
- #ccddcc
- RGB
- rgb(204 221 204)
- HSL
- hsl(120 20% 83%)
- HWB
- hwb(120 80% 13%)
- OKLCH
- oklch(0.88 0.029 145.3)
- OKLab
- oklab(0.88 -0.024 0.017)
- CIE Lab
- lab(86.47 -8.24 6.33)
- LCH
- lch(86.47 10.39 142.5)
- CMYK
- cmyk(8% 0% 8% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- D1E0D1
- D6E4D6
- DBE7DB
- E0EBE0
- E5EEE5
- EAF1EA
- F0F5F0
- F5F8F5
- FAFCFA
深色调
- B1C0B1
- 97A497
- 7E887E
- 656E65
- 4E554E
- 373D37
- 222622
- 0F110F
- 020202
灰色调
- C4D3C4
- BCCABC
- B5C0B5
- ADB7AD
- A5ADA5
- 9EA49E
- 969B96
- 8F928F
- 878987
配色和谐
互补色 +180°
- CCDDCC
Flip a Coin
- E2D1E2
≈ Purplish White
类似色 -30° +30°
- CCDDCC
Flip a Coin
- D6DAC5
≈ Smoky Light
- C4DED6
≈ Whipped Mint
三角配色 +120° +240°
- CCDDCC
Flip a Coin
- CED8EC
≈ Lilac Cotton Candy
- EAD1CE
≈ Cool Melon
分裂互补色 +150° +210°
- CCDDCC
Flip a Coin
- D8D4E9
≈ Violet Crush
- E8D0D8
≈ Orchid Rose
四角配色 +90° +180° +270°
- CCDDCC
Flip a Coin
- C6DBE8
≈ Celestial Light
- E2D1E2
≈ Purplish White
- E8D3C6
≈ Ash Plum
对比度与无障碍
Ag
Fail白底
WCAG 1.42:1 · APCA Lc 20
Ag
AAA黑底
WCAG 14.78:1 · APCA Lc 83
最佳文字颜色: #000000
WCAG 14.78:1 (AAA) · APCA Lc 83
Contrast pairs
代码片段
CSS
:root {
--flip-a-coin: #ccddcc;
--flip-a-coin-rgb: 204 221 204;
--flip-a-coin-oklch: oklch(0.88 0.029 145.3);
}
.element {
color: var(--flip-a-coin);
background-color: hsl(120 20% 83%);
border-color: oklch(0.88 0.029 145.3);
}Tailwind CSS v4
@theme {
--color-flip-a-coin: #ccddcc;
--color-flip-a-coin-50: #f0f8f0;
--color-flip-a-coin-100: #e2ebe2;
--color-flip-a-coin-200: #ccd8cd;
--color-flip-a-coin-300: #aebcaf;
--color-flip-a-coin-400: #94a394;
--color-flip-a-coin-500: #7a8c7b;
--color-flip-a-coin-600: #687668;
--color-flip-a-coin-700: #535f53;
--color-flip-a-coin-800: #3d453c;
--color-flip-a-coin-900: #2a3029;
--color-flip-a-coin-950: #171c17;
}SCSS
$flip-a-coin: #ccddcc;
$flip-a-coin-rgb: 204, 221, 204;
$flip-a-coin-light: mix(#fff, $flip-a-coin, 20%);
$flip-a-coin-dark: mix(#000, $flip-a-coin, 20%);
.element {
color: $flip-a-coin;
box-shadow: 0 0 0 2px rgba($flip-a-coin, 0.35);
}