Benannte Farbe · #FECD01
Tangerine Yellow
Tangerine Yellow ist #FECD01: rgb(254 205 1), hsl(48 99% 50%), oklch(0.866 0.177 91.2). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Tangerine Yellow color name →
#FECD01
oklch(0.866 0.177 91.2)
Farbumrechnungen
- HEX
- #fecd01
- RGB
- rgb(254 205 1)
- HSL
- hsl(48 99% 50%)
- HWB
- hwb(48 0% 0%)
- OKLCH
- oklch(0.866 0.177 91.2)
- OKLab
- oklab(0.866 -0.004 0.177)
- CIE Lab
- lab(84.9 7.34 84.74)
- LCH
- lch(84.9 85.06 85.1)
- CMYK
- cmyk(0% 19% 100% 0%)
Tints · Shades · Tones
Tints
- FED344
- FED862
- FFDD7B
- FFE290
- FFE8A4
- FFECB7
- FFF1CA
- FFF6DC
- FFFBEE
Shades
- DDB201
- BD9801
- 9E7E00
- 806600
- 634E00
- 473800
- 2D2300
- 160F00
- 030200
Tones
- F1C531
- E4BE45
- D7B653
- CAAF5D
- BDA766
- B19F6D
- A49873
- 989078
- 8C887C
Farbharmonien
Komplementär +180°
- FECD01
Tangerine Yellow
- C3D1FF
≈ Lavender Blue
Analog -30° +30°
- FECD01
Tangerine Yellow
- FFC696
≈ Dainty Apricot
- C2E44D
≈ Energos
Triadisch +120° +240°
- FECD01
Tangerine Yellow
- 66E8FF
≈ Robin’s Egg
- FFB7F5
≈ Hermosa Pink
Geteilt komplementär +150° +210°
- FECD01
Tangerine Yellow
- A9DAFF
≈ Droplet
- DCC8FF
≈ Neon Boneyard
Tetradisch +90° +180° +270°
- FECD01
Tangerine Yellow
- 00F4D9
≈ Frozen Boubble
- C3D1FF
≈ Lavender Blue
- FFBED0
≈ Garden Glory
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.50:1 · APCA Lc 23
Ag
AAAAuf Schwarz
WCAG 13.94:1 · APCA Lc 80
Beste Textfarbe: #000000
WCAG 13.94:1 (AAA) · APCA Lc 80
Contrast pairs
Code-Snippets
CSS
:root {
--tangerine-yellow: #fecd01;
--tangerine-yellow-rgb: 254 205 1;
--tangerine-yellow-oklch: oklch(0.866 0.177 91.2);
}
.element {
color: var(--tangerine-yellow);
background-color: hsl(48 99% 50%);
border-color: oklch(0.866 0.177 91.2);
}Tailwind CSS v4
@theme {
--color-tangerine-yellow: #fecd01;
--color-tangerine-yellow-50: #fff5bc;
--color-tangerine-yellow-100: #fce7a4;
--color-tangerine-yellow-200: #eed378;
--color-tangerine-yellow-300: #d6b538;
--color-tangerine-yellow-400: #c59800;
--color-tangerine-yellow-500: #b17d00;
--color-tangerine-yellow-600: #966a00;
--color-tangerine-yellow-700: #785500;
--color-tangerine-yellow-800: #5b3d00;
--color-tangerine-yellow-900: #3f2a00;
--color-tangerine-yellow-950: #281700;
}SCSS
$tangerine-yellow: #fecd01;
$tangerine-yellow-rgb: 254, 205, 1;
$tangerine-yellow-light: mix(#fff, $tangerine-yellow, 20%);
$tangerine-yellow-dark: mix(#000, $tangerine-yellow, 20%);
.element {
color: $tangerine-yellow;
box-shadow: 0 0 0 2px rgba($tangerine-yellow, 0.35);
}