Benannte Farbe · #F4F0D2
Oyster Cracker
Oyster Cracker ist #F4F0D2: rgb(244 240 210), hsl(53 61% 89%), oklch(0.95 0.04 100.9). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Yellow mean? → · Oyster Cracker color name →
#F4F0D2
oklch(0.95 0.04 100.9)
Farbumrechnungen
- HEX
- #f4f0d2
- RGB
- rgb(244 240 210)
- HSL
- hsl(53 61% 89%)
- HWB
- hwb(53 82% 4%)
- OKLCH
- oklch(0.95 0.04 100.9)
- OKLab
- oklab(0.95 -0.007 0.039)
- CIE Lab
- lab(94.53 -2.26 15.07)
- LCH
- lch(94.53 15.24 98.5)
- CMYK
- cmyk(0% 2% 14% 4%)
Tints · Shades · Tones
Tints
- F5F2D7
- F6F3DB
- F7F5E0
- F8F6E4
- F9F8E9
- FBF9ED
- FCFBF2
- FDFCF6
- FEFEFB
Shades
- D4D1B6
- B5B29B
- 979581
- 7A7868
- 5E5D50
- 444339
- 2B2A24
- 141410
- 030302
Tones
- E8E4CA
- DCD9C1
- D0CDB9
- C4C2B1
- B8B6A8
- ADABA0
- A1A098
- 969590
- 8B8B88
Farbharmonien
Komplementär +180°
- F4F0D2
Oyster Cracker
- EBEDFF
≈ Carte Blanche
Analog -30° +30°
- F4F0D2
Oyster Cracker
- FFEBD5
≈ Winter Morning
- E6F5D9
≈ Light Green Glint
Triadisch +120° +240°
- F4F0D2
Oyster Cracker
- D7F5FF
≈ Glacial Day
- FFE7F5
≈ Dolomite Crystal
Geteilt komplementär +150° +210°
- F4F0D2
Oyster Cracker
- E3F0FF
≈ Wizard White
- F6E9FF
≈ Placebo Fuchsia
Tetradisch +90° +180° +270°
- F4F0D2
Oyster Cracker
- D2F8F5
≈ Tinted Ice
- EBEDFF
≈ Carte Blanche
- FFE8EA
≈ Pink Sparkle
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.15:1 · APCA Lc 0
Ag
AAAAuf Schwarz
WCAG 18.24:1 · APCA Lc 97
Beste Textfarbe: #000000
WCAG 18.24:1 (AAA) · APCA Lc 97
Contrast pairs
Code-Snippets
CSS
:root {
--oyster-cracker: #f4f0d2;
--oyster-cracker-rgb: 244 240 210;
--oyster-cracker-oklch: oklch(0.95 0.04 100.9);
}
.element {
color: var(--oyster-cracker);
background-color: hsl(53 61% 89%);
border-color: oklch(0.95 0.04 100.9);
}Tailwind CSS v4
@theme {
--color-oyster-cracker: #f4f0d2;
--color-oyster-cracker-50: #f7f6e9;
--color-oyster-cracker-100: #eae9da;
--color-oyster-cracker-200: #d7d5c2;
--color-oyster-cracker-300: #bbb9a2;
--color-oyster-cracker-400: #a3a085;
--color-oyster-cracker-500: #8c8769;
--color-oyster-cracker-600: #767359;
--color-oyster-cracker-700: #5e5c47;
--color-oyster-cracker-800: #464333;
--color-oyster-cracker-900: #302e23;
--color-oyster-cracker-950: #1c1b12;
}SCSS
$oyster-cracker: #f4f0d2;
$oyster-cracker-rgb: 244, 240, 210;
$oyster-cracker-light: mix(#fff, $oyster-cracker, 20%);
$oyster-cracker-dark: mix(#000, $oyster-cracker, 20%);
.element {
color: $oyster-cracker;
box-shadow: 0 0 0 2px rgba($oyster-cracker, 0.35);
}