Nazwany kolor · #FEC36B
Roasted Sesame
Roasted Sesame to #FEC36B: rgb(254 195 107), hsl(36 99% 71%), oklch(0.853 0.125 75.7). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Roasted Sesame color name →
#FEC36B
oklch(0.853 0.125 75.7)
Konwersje koloru
- HEX
- #fec36b
- RGB
- rgb(254 195 107)
- HSL
- hsl(36 99% 71%)
- HWB
- hwb(36 42% 0%)
- OKLCH
- oklch(0.853 0.125 75.7)
- OKLab
- oklab(0.853 0.031 0.121)
- CIE Lab
- lab(82.95 14.89 52.07)
- LCH
- lch(82.95 54.15 74)
- CMYK
- cmyk(0% 23% 58% 0%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FEC97C
- FFD08C
- FFD69B
- FFDCAA
- FFE2B9
- FFE8C7
- FFEED5
- FFF3E3
- FFF9F1
Odcienie ciemniejsze
- DDA95C
- BD904E
- 9E783F
- 806032
- 634A25
- 473418
- 2D200D
- 160E04
- 030200
Tony
- F1BC6F
- E4B673
- D7AF76
- CAA878
- BEA27B
- B19B7C
- A5947E
- 988E7F
- 8C8780
Harmonie kolorów
Komplementarna +180°
- FEC36B
Roasted Sesame
- AFD2FF
≈ Ice Cold Stare
Analogowa -30° +30°
- FEC36B
Roasted Sesame
- FFBEA0
≈ Sweet Apricot
- DAD46D
≈ Lime Tree
Triada +120° +240°
- FEC36B
Roasted Sesame
- 51E8E9
≈ Near Moon
- EAB9FF
≈ Euphoria
Komplementarna rozszczepiona +150° +210°
- FEC36B
Roasted Sesame
- 86DCFF
≈ Tranquil Pool
- CAC8FF
≈ Innocent Snowdrop
Tetrada +90° +180° +270°
- FEC36B
Roasted Sesame
- 75E9BB
≈ Jittery Jade
- AFD2FF
≈ Ice Cold Stare
- FFB5DD
≈ Hot Aquarelle Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.58:1 · APCA Lc 26
Ag
AAANa czerni
WCAG 13.23:1 · APCA Lc 77
Najlepszy kolor tekstu: #000000
WCAG 13.23:1 (AAA) · APCA Lc 77
Contrast pairs
Fragmenty kodu
CSS
:root {
--roasted-sesame: #fec36b;
--roasted-sesame-rgb: 254 195 107;
--roasted-sesame-oklch: oklch(0.853 0.125 75.7);
}
.element {
color: var(--roasted-sesame);
background-color: hsl(36 99% 71%);
border-color: oklch(0.853 0.125 75.7);
}Tailwind CSS v4
@theme {
--color-roasted-sesame: #fec36b;
--color-roasted-sesame-50: #fff1ce;
--color-roasted-sesame-100: #ffe3ba;
--color-roasted-sesame-200: #f2ce97;
--color-roasted-sesame-300: #dbaf6b;
--color-roasted-sesame-400: #c9933f;
--color-roasted-sesame-500: #b57800;
--color-roasted-sesame-600: #996600;
--color-roasted-sesame-700: #7b5100;
--color-roasted-sesame-800: #5c3a00;
--color-roasted-sesame-900: #402801;
--color-roasted-sesame-950: #291600;
}SCSS
$roasted-sesame: #fec36b;
$roasted-sesame-rgb: 254, 195, 107;
$roasted-sesame-light: mix(#fff, $roasted-sesame, 20%);
$roasted-sesame-dark: mix(#000, $roasted-sesame, 20%);
.element {
color: $roasted-sesame;
box-shadow: 0 0 0 2px rgba($roasted-sesame, 0.35);
}