Benannte Farbe · #F7A233
Lightning Yellow
Lightning Yellow ist #F7A233: rgb(247 162 51), hsl(34 92% 58%), oklch(0.78 0.154 68). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Lightning Yellow color name →
#F7A233
oklch(0.78 0.154 68)
Farbumrechnungen
- HEX
- #f7a233
- RGB
- rgb(247 162 51)
- HSL
- hsl(34 92% 58%)
- HWB
- hwb(34 20% 3%)
- OKLCH
- oklch(0.78 0.154 68)
- OKLab
- oklab(0.78 0.058 0.143)
- CIE Lab
- lab(74.06 26.34 66.7)
- LCH
- lch(74.06 71.71 68.5)
- CMYK
- cmyk(0% 34% 79% 3%)
Tints · Shades · Tones
Tints
- F9AC51
- FAB668
- FBBF7D
- FCC991
- FDD2A4
- FEDBB7
- FFE4C9
- FFEDDB
- FFF6ED
Shades
- D78C2B
- B77723
- 99631C
- 7C4F14
- 603C0D
- 452A07
- 2C1903
- 150A01
- 030100
Tones
- EB9F42
- DF9C4E
- D39957
- C7965F
- BB9367
- B08F6D
- A48B72
- 988877
- 8C847C
Farbharmonien
Komplementär +180°
- F7A233
Lightning Yellow
- 78BEFF
≈ Cooler Than Ever
Analog -30° +30°
- F7A233
Lightning Yellow
- FF9878
≈ Flash in the Pan
- D2B720
≈ Lionhead
Triadisch +120° +240°
- F7A233
Lightning Yellow
- 00D2C7
≈ Turquoise Panic
- D19CFF
≈ Plasma Trail
Geteilt komplementär +150° +210°
- F7A233
Lightning Yellow
- 00CCF2
≈ Picnic Day Sky
- A6B0FF
≈ Shy Moment
Tetradisch +90° +180° +270°
- F7A233
Lightning Yellow
- 4AD491
≈ Envy’s Love
- 78BEFF
≈ Cooler Than Ever
- F68ED9
≈ Bubblegum Kisses
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 2.06:1 · APCA Lc 40
Ag
AAAAuf Schwarz
WCAG 10.17:1 · APCA Lc 62
Beste Textfarbe: #000000
WCAG 10.17:1 (AAA) · APCA Lc 62
Contrast pairs
Code-Snippets
CSS
:root {
--lightning-yellow: #f7a233;
--lightning-yellow-rgb: 247 162 51;
--lightning-yellow-oklch: oklch(0.78 0.154 68);
}
.element {
color: var(--lightning-yellow);
background-color: hsl(34 92% 58%);
border-color: oklch(0.78 0.154 68);
}Tailwind CSS v4
@theme {
--color-lightning-yellow: #f7a233;
--color-lightning-yellow-50: #ffeec6;
--color-lightning-yellow-100: #ffe0b0;
--color-lightning-yellow-200: #ffc98a;
--color-lightning-yellow-300: #eaa958;
--color-lightning-yellow-400: #d98a1b;
--color-lightning-yellow-500: #c66d00;
--color-lightning-yellow-600: #a85c00;
--color-lightning-yellow-700: #874a00;
--color-lightning-yellow-800: #653400;
--color-lightning-yellow-900: #472400;
--color-lightning-yellow-950: #2e1200;
}SCSS
$lightning-yellow: #f7a233;
$lightning-yellow-rgb: 247, 162, 51;
$lightning-yellow-light: mix(#fff, $lightning-yellow, 20%);
$lightning-yellow-dark: mix(#000, $lightning-yellow, 20%);
.element {
color: $lightning-yellow;
box-shadow: 0 0 0 2px rgba($lightning-yellow, 0.35);
}