Màu có tên · #CCDDBB
Golden Crested Wren
Golden Crested Wren là #CCDDBB: rgb(204 221 187), hsl(90 33% 80%), oklch(0.876 0.049 129.1). Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
What does Green mean? → · Golden Crested Wren color name →
#CCDDBB
oklch(0.876 0.049 129.1)
Chuyển đổi màu
- 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%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- D1E0C2
- D6E4C9
- DBE7CF
- E0EBD6
- E5EEDD
- EAF1E4
- F0F5EA
- F5F8F1
- FAFCF8
Sắc đậm
- B1C0A2
- 97A48A
- 7E8873
- 656E5C
- 4E5546
- 373D32
- 22261F
- 0F110D
- 020202
Sắc xám
- C4D3B5
- BCCAAF
- B5C0A9
- ADB7A3
- A5AD9D
- 9EA497
- 969B91
- 8F928C
- 878986
Hòa sắc
Bổ túc +180°
- CCDDBB
Golden Crested Wren
- E0CEEF
≈ Plum’s the Word
Tương đồng -30° +30°
- CCDDBB
Golden Crested Wren
- DED7B3
≈ Rancho Verde
- BCE1CB
≈ Luna Green
Bộ ba +120° +240°
- CCDDBB
Golden Crested Wren
- BEDAF6
≈ Oh Boy!
- F4C9CF
≈ Feather Boa
Bổ túc chia +150° +210°
- CCDDBB
Golden Crested Wren
- CFD3F7
≈ Pale Phthalo Blue
- EDCAE1
≈ LA Vibes
Bộ bốn +90° +180° +270°
- CCDDBB
Golden Crested Wren
- B3DFEC
≈ Polar Wind
- E0CEEF
≈ Plum’s the Word
- F4CCBF
≈ Salmon Tint
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 1.43:1 · APCA Lc 21
Ag
AAATrên nền đen
WCAG 14.62:1 · APCA Lc 82
Màu chữ tốt nhất: #000000
WCAG 14.62:1 (AAA) · APCA Lc 82
Contrast pairs
Đoạn mã
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);
}