Benannte Farbe · #F0D31E
Yellow Mellow
Yellow Mellow ist #F0D31E: rgb(240 211 30), hsl(52 88% 53%), oklch(0.865 0.174 98.8). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Yellow Mellow color name →
#F0D31E
oklch(0.865 0.174 98.8)
Farbumrechnungen
- HEX
- #f0d31e
- RGB
- rgb(240 211 30)
- HSL
- hsl(52 88% 53%)
- HWB
- hwb(52 12% 6%)
- OKLCH
- oklch(0.865 0.174 98.8)
- OKLab
- oklab(0.865 -0.027 0.172)
- CIE Lab
- lab(85.08 -1.21 80.65)
- LCH
- lch(85.08 80.66 90.9)
- CMYK
- cmyk(0% 12% 88% 6%)
Tints · Shades · Tones
Tints
- F1D84B
- F3DD67
- F4E17E
- F6E693
- F7EAA7
- F9EFB9
- FAF3CB
- FCF7DD
- FDFBEE
Shades
- D1B719
- B29C13
- 95820E
- 786909
- 5D5105
- 433A03
- 2A2401
- 141000
- 030200
Tones
- E4CB3A
- D8C24B
- CDBA57
- C1B260
- B6AA68
- ABA16E
- A09974
- 959179
- 8A887D
Farbharmonien
Komplementär +180°
- F0D31E
Yellow Mellow
- C8CFFF
≈ Lavender Blue
Analog -30° +30°
- F0D31E
Yellow Mellow
- FFC788
≈ Lazy Sun
- AFE862
≈ Inchworm
Triadisch +120° +240°
- F0D31E
Yellow Mellow
- 81E3FF
≈ Tranquil Pool
- FFB9E9
≈ Pink Quartz
Geteilt komplementär +150° +210°
- F0D31E
Yellow Mellow
- B0D7FF
≈ Malmö FF
- E3C4FF
≈ Jane Purple
Tetradisch +90° +180° +270°
- F0D31E
Yellow Mellow
- 00F2E6
≈ Frozen Boubble
- C8CFFF
≈ Lavender Blue
- FFBFC9
≈ Love Affair
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.49:1 · APCA Lc 23
Ag
AAAAuf Schwarz
WCAG 14.04:1 · APCA Lc 80
Beste Textfarbe: #000000
WCAG 14.04:1 (AAA) · APCA Lc 80
Contrast pairs
Code-Snippets
CSS
:root {
--yellow-mellow: #f0d31e;
--yellow-mellow-rgb: 240 211 30;
--yellow-mellow-oklch: oklch(0.865 0.174 98.8);
}
.element {
color: var(--yellow-mellow);
background-color: hsl(52 88% 53%);
border-color: oklch(0.865 0.174 98.8);
}Tailwind CSS v4
@theme {
--color-yellow-mellow: #f0d31e;
--color-yellow-mellow-50: #fff7be;
--color-yellow-mellow-100: #f4eaa6;
--color-yellow-mellow-200: #e4d77c;
--color-yellow-mellow-300: #cbb940;
--color-yellow-mellow-400: #b99e00;
--color-yellow-mellow-500: #a48400;
--color-yellow-mellow-600: #8b7000;
--color-yellow-mellow-700: #6f5900;
--color-yellow-mellow-800: #544000;
--color-yellow-mellow-900: #3b2c00;
--color-yellow-mellow-950: #251900;
}SCSS
$yellow-mellow: #f0d31e;
$yellow-mellow-rgb: 240, 211, 30;
$yellow-mellow-light: mix(#fff, $yellow-mellow, 20%);
$yellow-mellow-dark: mix(#000, $yellow-mellow, 20%);
.element {
color: $yellow-mellow;
box-shadow: 0 0 0 2px rgba($yellow-mellow, 0.35);
}