Nazwany kolor · #7B4D3A
Cheeky Chestnut
Cheeky Chestnut to #7B4D3A: rgb(123 77 58), hsl(18 36% 35%), oklch(0.468 0.069 43.1). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Red mean? → · Cheeky Chestnut color name →
#7B4D3A
oklch(0.468 0.069 43.1)
Konwersje koloru
- HEX
- #7b4d3a
- RGB
- rgb(123 77 58)
- HSL
- hsl(18 36% 35%)
- HWB
- hwb(18 23% 52%)
- OKLCH
- oklch(0.468 0.069 43.1)
- OKLab
- oklab(0.468 0.051 0.047)
- CIE Lab
- lab(37.81 18.37 19.75)
- LCH
- lch(37.81 26.97 47.1)
- CMYK
- cmyk(0% 37% 53% 52%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 885E4C
- 956E5E
- A27F71
- B09184
- BDA298
- CAB4AC
- D7C7C0
- E4D9D5
- F2ECEA
Odcienie ciemniejsze
- 6A4231
- 5A3728
- 4A2C20
- 3A2218
- 2C1810
- 1E0F09
- 100704
- 050201
- 010000
Tony
- 7C5241
- 7D5748
- 7E5D4F
- 7E6256
- 7F675D
- 7F6C64
- 80716B
- 807672
- 807B79
Harmonie kolorów
Komplementarna +180°
- 7B4D3A
Cheeky Chestnut
- 266377
≈ Holiday Velvet
Analogowa -30° +30°
- 7B4D3A
Cheeky Chestnut
- 7C494F
≈ Desert Canyon
- 72542B
≈ Bark Brown
Triada +120° +240°
- 7B4D3A
Cheeky Chestnut
- 31664F
≈ Poker Green
- 555580
≈ Aurora Splendour
Komplementarna rozszczepiona +150° +210°
- 7B4D3A
Cheeky Chestnut
- 1E6665
≈ Dusky Alpine Blue
- 3E5C80
≈ Atlantic Schooner
Tetrada +90° +180° +270°
- 7B4D3A
Cheeky Chestnut
- 4B633A
≈ Plasticine
- 266377
≈ Holiday Velvet
- 684F76
≈ Exotic Purple
Kontrast i dostępność
Ag
AAANa bieli
WCAG 7.08:1 · APCA Lc 84
Ag
FailNa czerni
WCAG 2.96:1 · APCA Lc 18
Najlepszy kolor tekstu: #FFFFFF
WCAG 7.08:1 (AAA) · APCA Lc 84
Contrast pairs
Fragmenty kodu
CSS
:root {
--cheeky-chestnut: #7b4d3a;
--cheeky-chestnut-rgb: 123 77 58;
--cheeky-chestnut-oklch: oklch(0.468 0.069 43.1);
}
.element {
color: var(--cheeky-chestnut);
background-color: hsl(18 36% 35%);
border-color: oklch(0.468 0.069 43.1);
}Tailwind CSS v4
@theme {
--color-cheeky-chestnut: #7b4d3a;
--color-cheeky-chestnut-50: #fff0e5;
--color-cheeky-chestnut-100: #fde1d5;
--color-cheeky-chestnut-200: #efccbc;
--color-cheeky-chestnut-300: #d7ad9a;
--color-cheeky-chestnut-400: #c2927e;
--color-cheeky-chestnut-500: #ae7761;
--color-cheeky-chestnut-600: #936552;
--color-cheeky-chestnut-700: #765142;
--color-cheeky-chestnut-800: #573a30;
--color-cheeky-chestnut-900: #3d2820;
--color-cheeky-chestnut-950: #261610;
}SCSS
$cheeky-chestnut: #7b4d3a;
$cheeky-chestnut-rgb: 123, 77, 58;
$cheeky-chestnut-light: mix(#fff, $cheeky-chestnut, 20%);
$cheeky-chestnut-dark: mix(#000, $cheeky-chestnut, 20%);
.element {
color: $cheeky-chestnut;
box-shadow: 0 0 0 2px rgba($cheeky-chestnut, 0.35);
}