Benannte Farbe · #F4EEDA
Aquarelle Yellow
Aquarelle Yellow ist #F4EEDA: rgb(244 238 218), hsl(46 54% 91%), oklch(0.948 0.027 93.1). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Gray mean? → · Aquarelle Yellow color name →
#F4EEDA
oklch(0.948 0.027 93.1)
Farbumrechnungen
- HEX
- #f4eeda
- RGB
- rgb(244 238 218)
- HSL
- hsl(46 54% 91%)
- HWB
- hwb(46 85% 4%)
- OKLCH
- oklch(0.948 0.027 93.1)
- OKLab
- oklab(0.948 -0.001 0.027)
- CIE Lab
- lab(94.17 -0.39 10.48)
- LCH
- lch(94.17 10.48 92.1)
- CMYK
- cmyk(0% 2% 11% 4%)
Tints · Shades · Tones
Tints
- F5F0DE
- F6F1E1
- F7F3E5
- F8F5E9
- F9F7ED
- FBF8F0
- FCFAF4
- FDFCF8
- FEFDFB
Shades
- D4CFBD
- B5B1A2
- 979387
- 7A776C
- 5E5C54
- 44423C
- 2B2A25
- 141411
- 030302
Tones
- E8E2D1
- DCD7C7
- D0CCBE
- C4C1B5
- B8B5AC
- ADABA3
- A1A09A
- 969591
- 8B8A89
Farbharmonien
Komplementär +180°
- F4EEDA
Aquarelle Yellow
- E8EDFF
≈ Brilliant White
Analog -30° +30°
- F4EEDA
Aquarelle Yellow
- FCEBDC
≈ Rosarian
- EAF1DE
≈ Clarity
Triadisch +120° +240°
- F4EEDA
Aquarelle Yellow
- DAF3F9
≈ Let It Snow
- FAE8F6
≈ Cherry Pearl
Geteilt komplementär +150° +210°
- F4EEDA
Aquarelle Yellow
- DFF1FF
≈ Wizard White
- F1EAFE
≈ Placebo Purple
Tetradisch +90° +180° +270°
- F4EEDA
Aquarelle Yellow
- DBF4F0
≈ Aqua Pura
- E8EDFF
≈ Brilliant White
- FFE7EC
≈ Porcelain Skin
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.16:1 · APCA Lc 8
Ag
AAAAuf Schwarz
WCAG 18.08:1 · APCA Lc 97
Beste Textfarbe: #000000
WCAG 18.08:1 (AAA) · APCA Lc 97
Contrast pairs
Code-Snippets
CSS
:root {
--aquarelle-yellow: #f4eeda;
--aquarelle-yellow-rgb: 244 238 218;
--aquarelle-yellow-oklch: oklch(0.948 0.027 93.1);
}
.element {
color: var(--aquarelle-yellow);
background-color: hsl(46 54% 91%);
border-color: oklch(0.948 0.027 93.1);
}Tailwind CSS v4
@theme {
--color-aquarelle-yellow: #f4eeda;
--color-aquarelle-yellow-50: #f7f5ed;
--color-aquarelle-yellow-100: #eae8de;
--color-aquarelle-yellow-200: #d8d4c8;
--color-aquarelle-yellow-300: #bbb8a8;
--color-aquarelle-yellow-400: #a49e8d;
--color-aquarelle-yellow-500: #8c8672;
--color-aquarelle-yellow-600: #777161;
--color-aquarelle-yellow-700: #5f5b4d;
--color-aquarelle-yellow-800: #464238;
--color-aquarelle-yellow-900: #302e26;
--color-aquarelle-yellow-950: #1d1a15;
}SCSS
$aquarelle-yellow: #f4eeda;
$aquarelle-yellow-rgb: 244, 238, 218;
$aquarelle-yellow-light: mix(#fff, $aquarelle-yellow, 20%);
$aquarelle-yellow-dark: mix(#000, $aquarelle-yellow, 20%);
.element {
color: $aquarelle-yellow;
box-shadow: 0 0 0 2px rgba($aquarelle-yellow, 0.35);
}