Nazwany kolor · #603932
Chocolate Fondant
Chocolate Fondant to #603932: rgb(96 57 50), hsl(9 32% 29%), oklch(0.39 0.057 30.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Brown mean? → · Chocolate Fondant color name →
#603932
oklch(0.39 0.057 30.8)
Konwersje koloru
- HEX
- #603932
- RGB
- rgb(96 57 50)
- HSL
- hsl(9 32% 29%)
- HWB
- hwb(9 20% 62%)
- OKLCH
- oklch(0.39 0.057 30.8)
- OKLab
- oklab(0.39 0.049 0.029)
- CIE Lab
- lab(28.72 17.14 12.06)
- LCH
- lch(28.72 20.96 35.1)
- CMYK
- cmyk(0% 41% 48% 62%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 6F4B44
- 7F5D57
- 8E706A
- 9E837E
- AE9792
- BEABA7
- CEBFBC
- DED4D2
- EFE9E8
Odcienie ciemniejsze
- 52302A
- 452822
- 381F1B
- 2C1714
- 20100D
- 150907
- 0A0403
- 030101
- 000000
Tony
- 644039
- 674741
- 6B4E49
- 6E5550
- 715C58
- 746360
- 776A68
- 7A7170
- 7D7978
Harmonie kolorów
Komplementarna +180°
- 603932
Chocolate Fondant
- 174D56
≈ Iron Teal
Analogowa -30° +30°
- 603932
Chocolate Fondant
- 5E3843
≈ Bordeaux Leaf
- 5B3E24
≈ Bracken
Triada +120° +240°
- 603932
Chocolate Fondant
- 2D4E35
≈ Moselle Green
- 394364
≈ Genie
Komplementarna rozszczepiona +150° +210°
- 603932
Chocolate Fondant
- 1A4F47
≈ Stockade Green
- 264961
≈ Arapawa
Tetrada +90° +180° +270°
- 603932
Chocolate Fondant
- 404A25
≈ Avocado Dark Green
- 174D56
≈ Iron Teal
- 4A3E5F
≈ Powerful Mauve
Kontrast i dostępność
Ag
AAANa bieli
WCAG 9.86:1 · APCA Lc 93
Ag
FailNa czerni
WCAG 2.12:1 · APCA Lc 10
Najlepszy kolor tekstu: #FFFFFF
WCAG 9.86:1 (AAA) · APCA Lc 93
Contrast pairs
Fragmenty kodu
CSS
:root {
--chocolate-fondant: #603932;
--chocolate-fondant-rgb: 96 57 50;
--chocolate-fondant-oklch: oklch(0.39 0.057 30.8);
}
.element {
color: var(--chocolate-fondant);
background-color: hsl(9 32% 29%);
border-color: oklch(0.39 0.057 30.8);
}Tailwind CSS v4
@theme {
--color-chocolate-fondant: #603932;
--color-chocolate-fondant-50: #fff0eb;
--color-chocolate-fondant-100: #fae1dc;
--color-chocolate-fondant-200: #ecccc5;
--color-chocolate-fondant-300: #d3ada5;
--color-chocolate-fondant-400: #be928a;
--color-chocolate-fondant-500: #a9786f;
--color-chocolate-fondant-600: #8f665e;
--color-chocolate-fondant-700: #72514b;
--color-chocolate-fondant-800: #553b37;
--color-chocolate-fondant-900: #3b2826;
--color-chocolate-fondant-950: #251614;
}SCSS
$chocolate-fondant: #603932;
$chocolate-fondant-rgb: 96, 57, 50;
$chocolate-fondant-light: mix(#fff, $chocolate-fondant, 20%);
$chocolate-fondant-dark: mix(#000, $chocolate-fondant, 20%);
.element {
color: $chocolate-fondant;
box-shadow: 0 0 0 2px rgba($chocolate-fondant, 0.35);
}