Benannte Farbe · #E4B197
Pretty Rascal
Pretty Rascal ist #E4B197: rgb(228 177 151), hsl(20 59% 74%), oklch(0.8 0.07 48.3). Mit Tints, Shades, Harmonien, WCAG- & APCA-Kontrast sowie CSS-, Tailwind-v4- und SCSS-Code.
What does Orange mean? → · Pretty Rascal color name →
#E4B197
oklch(0.8 0.07 48.3)
Farbumrechnungen
- HEX
- #e4b197
- RGB
- rgb(228 177 151)
- HSL
- hsl(20 59% 74%)
- HWB
- hwb(20 59% 11%)
- OKLCH
- oklch(0.8 0.07 48.3)
- OKLab
- oklab(0.8 0.046 0.052)
- CIE Lab
- lab(76.47 16.56 20.85)
- LCH
- lch(76.47 26.63 51.5)
- CMYK
- cmyk(0% 22% 34% 11%)
Tints · Shades · Tones
Tints
- E7B9A1
- EAC1AC
- EDC8B6
- F0D0C0
- F2D8CB
- F5E0D5
- F8E7DF
- FAEFEA
- FDF7F4
Shades
- C69983
- A9836F
- 8D6C5C
- 725749
- 584237
- 3F2F26
- 281C17
- 120C08
- 030101
Tones
- DAAC95
- D0A793
- C6A291
- BB9D8E
- B1988C
- A7948A
- 9E8F87
- 948A85
- 8A8582
Farbharmonien
Komplementär +180°
- E4B197
Pretty Rascal
- 8EC7E2
≈ Gossamer Threads
Analog -30° +30°
- E4B197
Pretty Rascal
- E7ACAD
≈ Shaded Primrose
- D7B98B
≈ Splash of Honey
Triadisch +120° +240°
- E4B197
Pretty Rascal
- 91CDB5
≈ Vile Green
- BBB7E9
≈ Pretty Posie
Geteilt komplementär +150° +210°
- E4B197
Pretty Rascal
- 87CCCE
≈ Aqua Splash
- A3C0EB
≈ Sky High
Tetradisch +90° +180° +270°
- E4B197
Pretty Rascal
- A8C99E
≈ Geddy Green
- 8EC7E2
≈ Gossamer Threads
- D1B0DB
≈ Whisper of Plum
Kontrast & Barrierefreiheit
Ag
FailAuf Weiß
WCAG 1.90:1 · APCA Lc 36
Ag
AAAAuf Schwarz
WCAG 11.03:1 · APCA Lc 66
Beste Textfarbe: #000000
WCAG 11.03:1 (AAA) · APCA Lc 66
Contrast pairs
Code-Snippets
CSS
:root {
--pretty-rascal: #e4b197;
--pretty-rascal-rgb: 228 177 151;
--pretty-rascal-oklch: oklch(0.8 0.07 48.3);
}
.element {
color: var(--pretty-rascal);
background-color: hsl(20 59% 74%);
border-color: oklch(0.8 0.07 48.3);
}Tailwind CSS v4
@theme {
--color-pretty-rascal: #e4b197;
--color-pretty-rascal-50: #fff0e4;
--color-pretty-rascal-100: #fce2d4;
--color-pretty-rascal-200: #eeccba;
--color-pretty-rascal-300: #d6ae98;
--color-pretty-rascal-400: #c1937b;
--color-pretty-rascal-500: #ac785d;
--color-pretty-rascal-600: #92664f;
--color-pretty-rascal-700: #75513f;
--color-pretty-rascal-800: #573b2e;
--color-pretty-rascal-900: #3d281f;
--color-pretty-rascal-950: #26160f;
}SCSS
$pretty-rascal: #e4b197;
$pretty-rascal-rgb: 228, 177, 151;
$pretty-rascal-light: mix(#fff, $pretty-rascal, 20%);
$pretty-rascal-dark: mix(#000, $pretty-rascal, 20%);
.element {
color: $pretty-rascal;
box-shadow: 0 0 0 2px rgba($pretty-rascal, 0.35);
}