Nazwany kolor · #C5A986
Toasted Grain
Toasted Grain to #C5A986: rgb(197 169 134), hsl(33 35% 65%), oklch(0.751 0.058 73). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Toasted Grain color name →
#C5A986
oklch(0.751 0.058 73)
Konwersje koloru
- HEX
- #c5a986
- RGB
- rgb(197 169 134)
- HSL
- hsl(33 35% 65%)
- HWB
- hwb(33 53% 23%)
- OKLCH
- oklch(0.751 0.058 73)
- OKLab
- oklab(0.751 0.017 0.055)
- CIE Lab
- lab(71.08 6.75 22.1)
- LCH
- lch(71.08 23.11 73)
- CMYK
- cmyk(0% 14% 32% 23%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- CBB192
- D1BA9E
- D6C2AA
- DCCBB6
- E2D3C2
- E8DCCE
- EEE5DA
- F3EDE6
- F9F6F3
Odcienie ciemniejsze
- AB9274
- 927C62
- 796751
- 615340
- 4B3F30
- 352C21
- 211B13
- 0E0A06
- 020101
Tony
- BEA586
- B7A185
- B09D85
- A99984
- A29484
- 9B9083
- 948C82
- 8E8882
- 878481
Harmonie kolorów
Komplementarna +180°
- C5A986
Toasted Grain
- 95B1D3
≈ Lazy Day
Analogowa -30° +30°
- C5A986
Toasted Grain
- CFA391
≈ The Boulevard
- B4B086
≈ Lively Ivy
Triada +120° +240°
- C5A986
Toasted Grain
- 83BAB8
≈ Vintage Blue
- BBA4C9
≈ Lavendula
Komplementarna rozszczepiona +150° +210°
- C5A986
Toasted Grain
- 86B7C9
≈ Blue Bird Morning
- A8AAD2
≈ Monastic
Tetrada +90° +180° +270°
- C5A986
Toasted Grain
- 8DBAA4
≈ Lichen
- 95B1D3
≈ Lazy Day
- C9A0B8
≈ Idyllic Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.23:1 · APCA Lc 44
Ag
AAANa czerni
WCAG 9.39:1 · APCA Lc 58
Najlepszy kolor tekstu: #000000
WCAG 9.39:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmenty kodu
CSS
:root {
--toasted-grain: #c5a986;
--toasted-grain-rgb: 197 169 134;
--toasted-grain-oklch: oklch(0.751 0.058 73);
}
.element {
color: var(--toasted-grain);
background-color: hsl(33 35% 65%);
border-color: oklch(0.751 0.058 73);
}Tailwind CSS v4
@theme {
--color-toasted-grain: #c5a986;
--color-toasted-grain-50: #fff3e3;
--color-toasted-grain-100: #f4e6d3;
--color-toasted-grain-200: #e3d1ba;
--color-toasted-grain-300: #c9b497;
--color-toasted-grain-400: #b49a79;
--color-toasted-grain-500: #9e805b;
--color-toasted-grain-600: #856d4d;
--color-toasted-grain-700: #6b573e;
--color-toasted-grain-800: #4f3f2c;
--color-toasted-grain-900: #372b1e;
--color-toasted-grain-950: #22190e;
}SCSS
$toasted-grain: #c5a986;
$toasted-grain-rgb: 197, 169, 134;
$toasted-grain-light: mix(#fff, $toasted-grain, 20%);
$toasted-grain-dark: mix(#000, $toasted-grain, 20%);
.element {
color: $toasted-grain;
box-shadow: 0 0 0 2px rgba($toasted-grain, 0.35);
}