最接近的命名颜色 · #CC4E11
#CC4E11
最接近的命名颜色: Mellow Mango
#CC4E11（rgb(204 78 17)、hsl(20 85% 43%)、oklch(0.586 0.172 41.2)）最接近命名颜色 Mellow Mango。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度，以及 CSS、Tailwind v4 和 SCSS 代码。
#CC4E11
oklch(0.586 0.172 41.2)
颜色转换
- HEX
- #cc4e11
- RGB
- rgb(204 78 17)
- HSL
- hsl(20 85% 43%)
- HWB
- hwb(20 7% 20%)
- OKLCH
- oklch(0.586 0.172 41.2)
- OKLab
- oklab(0.586 0.13 0.113)
- CIE Lab
- lab(50.61 49.22 57.14)
- LCH
- lch(50.61 75.42 49.3)
- CMYK
- cmyk(0% 62% 92% 20%)
浅色调 · 深色调 · 灰色调
浅色调
- D36234
- DA754E
- E18765
- E7987B
- ECA991
- F1BBA6
- F5CCBC
- F9DDD2
- FCEEE9
深色调
- B1430D
- 973809
- 7E2D06
- 652304
- 4E1902
- 370F01
- 220700
- 0F0200
- 020000
灰色调
- C65527
- BF5C35
- B86241
- B1674C
- AA6C55
- A2715F
- 9A7567
- 927970
- 897D78
配色和谐
互补色 +180°
- CC4E11
Mellow Mango
- 008AA9
≈ Capri Breeze
类似色 -30° +30°
- CC4E11
Mellow Mango
- CD4462
≈ Paper Hearts
- AA6D00
≈ Cookie Dough
三角配色 +120° +240°
- CC4E11
Mellow Mango
- 009362
≈ Emerald Lake
- 6E6ADE
≈ C64 Purple
分裂互补色 +150° +210°
- CC4E11
Mellow Mango
- 008F8B
≈ Corfu Shallows
- 007EDD
≈ Soothing Sapphire
四角配色 +90° +180° +270°
- CC4E11
Mellow Mango
- 588E00
≈ Vida Loca
- 008AA9
≈ Capri Breeze
- 9D58C6
≈ Morado Purple
对比度与无障碍
Ag
AA白底
WCAG 4.50:1 · APCA Lc 70
Ag
AA黑底
WCAG 4.66:1 · APCA Lc 31
最佳文字颜色: #000000
WCAG 4.66:1 (AA) · APCA Lc 31
Contrast pairs
代码片段
CSS
:root {
--mellow-mango: #cc4e11;
--mellow-mango-rgb: 204 78 17;
--mellow-mango-oklch: oklch(0.586 0.172 41.2);
}
.element {
color: var(--mellow-mango);
background-color: hsl(20 85% 43%);
border-color: oklch(0.586 0.172 41.2);
}Tailwind CSS v4
@theme {
--color-mellow-mango: #cc4e11;
--color-mellow-mango-50: #ffe6ce;
--color-mellow-mango-100: #ffd6ba;
--color-mellow-mango-200: #ffbc98;
--color-mellow-mango-300: #ff986d;
--color-mellow-mango-400: #f07646;
--color-mellow-mango-500: #df5101;
--color-mellow-mango-600: #bc460b;
--color-mellow-mango-700: #97380a;
--color-mellow-mango-800: #71270a;
--color-mellow-mango-900: #501a06;
--color-mellow-mango-950: #350900;
}SCSS
$mellow-mango: #cc4e11;
$mellow-mango-rgb: 204, 78, 17;
$mellow-mango-light: mix(#fff, $mellow-mango, 20%);
$mellow-mango-dark: mix(#000, $mellow-mango, 20%);
.element {
color: $mellow-mango;
box-shadow: 0 0 0 2px rgba($mellow-mango, 0.35);
}