Nazwany kolor · #CC6E3B
Hot Caramel
Hot Caramel to #CC6E3B: rgb(204 110 59), hsl(21 59% 52%), oklch(0.636 0.135 47.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Hot Caramel color name →
#CC6E3B
oklch(0.636 0.135 47.3)
Konwersje koloru
- HEX
- #cc6e3b
- RGB
- rgb(204 110 59)
- HSL
- hsl(21 59% 52%)
- HWB
- hwb(21 23% 20%)
- OKLCH
- oklch(0.636 0.135 47.3)
- OKLab
- oklab(0.636 0.092 0.099)
- CIE Lab
- lab(56.96 35.13 44.8)
- LCH
- lch(56.96 56.94 51.9)
- CMYK
- cmyk(0% 46% 71% 20%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- D27D51
- D98C65
- DE9A78
- E4A88B
- E9B79E
- EEC5B1
- F3D4C5
- F7E2D8
- FBF0EB
Odcienie ciemniejsze
- B15F32
- 975029
- 7E4121
- 653319
- 4E2611
- 371909
- 220E04
- 0F0401
- 020100
Tony
- C57144
- BE734D
- B77554
- AF775C
- A87962
- A07B69
- 997C6F
- 917E75
- 897F7A
Harmonie kolorów
Komplementarna +180°
- CC6E3B
Hot Caramel
- 0099C5
≈ Atomic Blue
Analogowa -30° +30°
- CC6E3B
Hot Caramel
- D0656D
≈ Italiano Rose
- B77F00
≈ Guo Tie Dumpling
Triada +120° +240°
- CC6E3B
Hot Caramel
- 00A37B
≈ Sport Green
- 877CD8
≈ Indigo Bloom
Komplementarna rozszczepiona +150° +210°
- CC6E3B
Hot Caramel
- 009FA2
≈ Pleasant Stream
- 538CDC
≈ Blue Jay
Tetrada +90° +180° +270°
- CC6E3B
Hot Caramel
- 619E47
≈ Calm Balm
- 0099C5
≈ Atomic Blue
- AC6FC1
≈ Lavendless
Kontrast i dostępność
Ag
FailNa bieli
WCAG 3.58:1 · APCA Lc 63
Ag
AANa czerni
WCAG 5.86:1 · APCA Lc 39
Najlepszy kolor tekstu: #000000
WCAG 5.86:1 (AA) · APCA Lc 39
Contrast pairs
Fragmenty kodu
CSS
:root {
--hot-caramel: #cc6e3b;
--hot-caramel-rgb: 204 110 59;
--hot-caramel-oklch: oklch(0.636 0.135 47.3);
}
.element {
color: var(--hot-caramel);
background-color: hsl(21 59% 52%);
border-color: oklch(0.636 0.135 47.3);
}Tailwind CSS v4
@theme {
--color-hot-caramel: #cc6e3b;
--color-hot-caramel-50: #ffebd4;
--color-hot-caramel-100: #ffdbc0;
--color-hot-caramel-200: #ffc4a1;
--color-hot-caramel-300: #f0a278;
--color-hot-caramel-400: #df8354;
--color-hot-caramel-500: #cc6529;
--color-hot-caramel-600: #ac5625;
--color-hot-caramel-700: #8a451d;
--color-hot-caramel-800: #673115;
--color-hot-caramel-900: #49210d;
--color-hot-caramel-950: #2f1002;
}SCSS
$hot-caramel: #cc6e3b;
$hot-caramel-rgb: 204, 110, 59;
$hot-caramel-light: mix(#fff, $hot-caramel, 20%);
$hot-caramel-dark: mix(#000, $hot-caramel, 20%);
.element {
color: $hot-caramel;
box-shadow: 0 0 0 2px rgba($hot-caramel, 0.35);
}