命名颜色 · #CCDDBB
Golden Crested Wren
Golden Crested Wren 即 #CCDDBB：rgb(204 221 187)、hsl(90 33% 80%)、oklch(0.876 0.049 129.1)。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
What does Green mean? → · Golden Crested Wren color name →
#CCDDBB
oklch(0.876 0.049 129.1)
颜色转换
- HEX
- #ccddbb
- RGB
- rgb(204 221 187)
- HSL
- hsl(90 33% 80%)
- HWB
- hwb(90 73% 13%)
- OKLCH
- oklch(0.876 0.049 129.1)
- OKLab
- oklab(0.876 -0.031 0.038)
- CIE Lab
- lab(86.15 -10.4 14.74)
- LCH
- lch(86.15 18.04 125.2)
- CMYK
- cmyk(8% 0% 15% 13%)
浅色调 · 深色调 · 灰色调
浅色调
- D1E0C2
- D6E4C9
- DBE7CF
- E0EBD6
- E5EEDD
- EAF1E4
- F0F5EA
- F5F8F1
- FAFCF8
深色调
- B1C0A2
- 97A48A
- 7E8873
- 656E5C
- 4E5546
- 373D32
- 22261F
- 0F110D
- 020202
灰色调
- C4D3B5
- BCCAAF
- B5C0A9
- ADB7A3
- A5AD9D
- 9EA497
- 969B91
- 8F928C
- 878986
配色和谐
互补色 +180°
- CCDDBB
Golden Crested Wren
- E0CEEF
≈ Plum’s the Word
类似色 -30° +30°
- CCDDBB
Golden Crested Wren
- DED7B3
≈ Rancho Verde
- BCE1CB
≈ Luna Green
三角配色 +120° +240°
- CCDDBB
Golden Crested Wren
- BEDAF6
≈ Oh Boy!
- F4C9CF
≈ Feather Boa
分裂互补色 +150° +210°
- CCDDBB
Golden Crested Wren
- CFD3F7
≈ Pale Phthalo Blue
- EDCAE1
≈ LA Vibes
四角配色 +90° +180° +270°
- CCDDBB
Golden Crested Wren
- B3DFEC
≈ Polar Wind
- E0CEEF
≈ Plum’s the Word
- F4CCBF
≈ Salmon Tint
对比度与无障碍
Ag
Fail白底
WCAG 1.43:1 · APCA Lc 21
Ag
AAA黑底
WCAG 14.62:1 · APCA Lc 82
最佳文字颜色: #000000
WCAG 14.62:1 (AAA) · APCA Lc 82
Contrast pairs
代码片段
CSS
:root {
--golden-crested-wren: #ccddbb;
--golden-crested-wren-rgb: 204 221 187;
--golden-crested-wren-oklch: oklch(0.876 0.049 129.1);
}
.element {
color: var(--golden-crested-wren);
background-color: hsl(90 33% 80%);
border-color: oklch(0.876 0.049 129.1);
}Tailwind CSS v4
@theme {
--color-golden-crested-wren: #ccddbb;
--color-golden-crested-wren-50: #f0f8ea;
--color-golden-crested-wren-100: #e2ecdb;
--color-golden-crested-wren-200: #cdd9c3;
--color-golden-crested-wren-300: #afbda3;
--color-golden-crested-wren-400: #95a586;
--color-golden-crested-wren-500: #7c8d6a;
--color-golden-crested-wren-600: #69775a;
--color-golden-crested-wren-700: #545f48;
--color-golden-crested-wren-800: #3e4633;
--color-golden-crested-wren-900: #2a3023;
--color-golden-crested-wren-950: #181c12;
}SCSS
$golden-crested-wren: #ccddbb;
$golden-crested-wren-rgb: 204, 221, 187;
$golden-crested-wren-light: mix(#fff, $golden-crested-wren, 20%);
$golden-crested-wren-dark: mix(#000, $golden-crested-wren, 20%);
.element {
color: $golden-crested-wren;
box-shadow: 0 0 0 2px rgba($golden-crested-wren, 0.35);
}