Nazwany kolor · #AF9A73
Toasted Sesame
Toasted Sesame to #AF9A73: rgb(175 154 115), hsl(39 27% 57%), oklch(0.695 0.059 82.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Toasted Sesame color name →
#AF9A73
oklch(0.695 0.059 82.7)
Konwersje koloru
- HEX
- #af9a73
- RGB
- rgb(175 154 115)
- HSL
- hsl(39 27% 57%)
- HWB
- hwb(39 45% 31%)
- OKLCH
- oklch(0.695 0.059 82.7)
- OKLab
- oklab(0.695 0.007 0.059)
- CIE Lab
- lab(64.76 3.72 23.53)
- LCH
- lch(64.76 23.82 81)
- CMYK
- cmyk(0% 12% 34% 31%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- B7A481
- BFAE8E
- C7B89C
- CEC2AA
- D6CCB8
- DFD6C6
- E7E0D4
- EFEAE2
- F7F5F1
Odcienie ciemniejsze
- 988563
- 817154
- 6B5E45
- 564B36
- 413928
- 2E271B
- 1C170F
- 0B0905
- 010101
Tony
- AA9775
- A59576
- A19278
- 9C9079
- 978D7A
- 938B7C
- 8E887D
- 89857E
- 85837F
Harmonie kolorów
Komplementarna +180°
- AF9A73
Toasted Sesame
- 8A9DC2
≈ Lavender Lustre
Analogowa -30° +30°
- AF9A73
Toasted Sesame
- BB937B
≈ Turkish Bath
- 9DA177
≈ Dill Powder
Triada +120° +240°
- AF9A73
Toasted Sesame
- 70A8AD
≈ Water Cooler
- AF91B3
≈ Metal Petal
Komplementarna rozszczepiona +150° +210°
- AF9A73
Toasted Sesame
- 78A4BC
≈ Ocean Surf
- 9E97BF
≈ Majestic Violet
Tetrada +90° +180° +270°
- AF9A73
Toasted Sesame
- 77A999
≈ Acapulco
- 8A9DC2
≈ Lavender Lustre
- BB8EA0
≈ Elite Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.72:1 · APCA Lc 53
Ag
AAANa czerni
WCAG 7.69:1 · APCA Lc 49
Najlepszy kolor tekstu: #000000
WCAG 7.69:1 (AAA) · APCA Lc 49
Contrast pairs
Fragmenty kodu
CSS
:root {
--toasted-sesame: #af9a73;
--toasted-sesame-rgb: 175 154 115;
--toasted-sesame-oklch: oklch(0.695 0.059 82.7);
}
.element {
color: var(--toasted-sesame);
background-color: hsl(39 27% 57%);
border-color: oklch(0.695 0.059 82.7);
}Tailwind CSS v4
@theme {
--color-toasted-sesame: #af9a73;
--color-toasted-sesame-50: #fdf4e3;
--color-toasted-sesame-100: #f1e7d2;
--color-toasted-sesame-200: #e0d3b8;
--color-toasted-sesame-300: #c5b696;
--color-toasted-sesame-400: #b09c77;
--color-toasted-sesame-500: #998358;
--color-toasted-sesame-600: #826f4b;
--color-toasted-sesame-700: #68593c;
--color-toasted-sesame-800: #4d402b;
--color-toasted-sesame-900: #362c1d;
--color-toasted-sesame-950: #21190d;
}SCSS
$toasted-sesame: #af9a73;
$toasted-sesame-rgb: 175, 154, 115;
$toasted-sesame-light: mix(#fff, $toasted-sesame, 20%);
$toasted-sesame-dark: mix(#000, $toasted-sesame, 20%);
.element {
color: $toasted-sesame;
box-shadow: 0 0 0 2px rgba($toasted-sesame, 0.35);
}