Nazwany kolor · #F6AA09
Spectra Yellow
Spectra Yellow to #F6AA09: rgb(246 170 9), hsl(41 93% 50%), oklch(0.791 0.165 76.3). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Spectra Yellow color name →
#F6AA09
oklch(0.791 0.165 76.3)
Konwersje koloru
- HEX
- #f6aa09
- RGB
- rgb(246 170 9)
- HSL
- hsl(41 93% 50%)
- HWB
- hwb(41 4% 4%)
- OKLCH
- oklch(0.791 0.165 76.3)
- OKLab
- oklab(0.791 0.039 0.16)
- CIE Lab
- lab(75.66 21.34 77.53)
- LCH
- lch(75.66 80.42 74.6)
- CMYK
- cmyk(0% 31% 96% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F8B340
- F9BC5D
- FAC575
- FBCD8B
- FCD69F
- FDDEB3
- FEE7C6
- FEEFD9
- FFF7EC
Odcienie ciemniejsze
- D69307
- B77D05
- 986803
- 7B5302
- 5F3F01
- 452D01
- 2C1B00
- 150B00
- 030100
Tony
- EAA62F
- DEA241
- D29F4E
- C69A59
- BA9661
- AF9269
- A38E70
- 978976
- 8C857B
Harmonie kolorów
Komplementarna +180°
- F6AA09
Spectra Yellow
- 8EBEFF
≈ Scenic Water
Analogowa -30° +30°
- F6AA09
Spectra Yellow
- FF9F71
≈ Butternut
- C9C118
≈ Cricket Chirping
Triada +120° +240°
- F6AA09
Spectra Yellow
- 00D5D8
≈ Aztec Turquoise
- E399FF
≈ Party Pig
Komplementarna rozszczepiona +150° +210°
- F6AA09
Spectra Yellow
- 37CCFF
≈ Thor’s Thunder
- B5B0FF
≈ Winterspring Lilac
Tetrada +90° +180° +270°
- F6AA09
Spectra Yellow
- 00DBA3
≈ Malted Mint Madness
- 8EBEFF
≈ Scenic Water
- FF91CF
≈ Shimmering Love
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.96:1 · APCA Lc 38
Ag
AAANa czerni
WCAG 10.67:1 · APCA Lc 65
Najlepszy kolor tekstu: #000000
WCAG 10.67:1 (AAA) · APCA Lc 65
Contrast pairs
Fragmenty kodu
CSS
:root {
--spectra-yellow: #f6aa09;
--spectra-yellow-rgb: 246 170 9;
--spectra-yellow-oklch: oklch(0.791 0.165 76.3);
}
.element {
color: var(--spectra-yellow);
background-color: hsl(41 93% 50%);
border-color: oklch(0.791 0.165 76.3);
}Tailwind CSS v4
@theme {
--color-spectra-yellow: #f6aa09;
--color-spectra-yellow-50: #fff0c0;
--color-spectra-yellow-100: #ffe2aa;
--color-spectra-yellow-200: #fbcc81;
--color-spectra-yellow-300: #e5ac49;
--color-spectra-yellow-400: #d58e00;
--color-spectra-yellow-500: #c27100;
--color-spectra-yellow-600: #a46000;
--color-spectra-yellow-700: #834d00;
--color-spectra-yellow-800: #633700;
--color-spectra-yellow-900: #452500;
--color-spectra-yellow-950: #2d1300;
}SCSS
$spectra-yellow: #f6aa09;
$spectra-yellow-rgb: 246, 170, 9;
$spectra-yellow-light: mix(#fff, $spectra-yellow, 20%);
$spectra-yellow-dark: mix(#000, $spectra-yellow, 20%);
.element {
color: $spectra-yellow;
box-shadow: 0 0 0 2px rgba($spectra-yellow, 0.35);
}