Named color · #E5E1E6
Budapest Pastel
Budapest Pastel is #E5E1E6: rgb(229 225 230), hsl(288 9% 89%), oklch(0.914 0.008 319.4). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Gray mean? → · Budapest Pastel color name →
#E5E1E6
oklch(0.914 0.008 319.4)
Color conversions
- HEX
- #e5e1e6
- RGB
- rgb(229 225 230)
- HSL
- hsl(288 9% 89%)
- HWB
- hwb(288 88% 10%)
- OKLCH
- oklch(0.914 0.008 319.4)
- OKLab
- oklab(0.914 0.006 -0.005)
- CIE Lab
- lab(89.96 2.07 -1.94)
- LCH
- lch(89.96 2.84 316.8)
- CMYK
- cmyk(0% 2% 0% 10%)
Tints · Shades · Tones
Tints
- E8E4E8
- EAE7EB
- EDEAED
- EFEDF0
- F2F0F2
- F5F3F5
- F7F6F7
- FAF9FA
- FCFCFC
Shades
- C7C4C8
- AAA7AB
- 8E8B8E
- 727073
- 585659
- 3F3E40
- 282728
- 121213
- 030203
Tones
- DAD7DB
- D0CDD1
- C6C3C6
- BBB9BC
- B1AFB2
- A7A6A7
- 9D9C9D
- 939393
- 8A898A
Color harmonies
Complementary +180°
- E5E1E6
Budapest Pastel
- E0E4DF
≈ Illuminating Experience
Analogous -30° +30°
- E5E1E6
Budapest Pastel
- E2E2E8
≈ Violet White
- E7E1E3
≈ Misty Morn
Triadic +120° +240°
- E5E1E6
Budapest Pastel
- E5E2DD
≈ Quiet on the Set
- DDE4E5
≈ Alpine Blue
Split-complementary +150° +210°
- E5E1E6
Budapest Pastel
- E3E3DD
≈ Snow Drift
- DEE4E2
≈ Dewdrop
Tetradic +90° +180° +270°
- E5E1E6
Budapest Pastel
- E7E1DE
≈ Bridal Veil
- E0E4DF
≈ Illuminating Experience
- DEE4E7
≈ Elusive Blue
Contrast & accessibility
Ag
FailOn white
WCAG 1.29:1 · APCA Lc 15
Ag
AAAOn black
WCAG 16.24:1 · APCA Lc 89
Best text color: #000000
WCAG 16.24:1 (AAA) · APCA Lc 89
Contrast pairs
Code snippets
CSS
:root {
--budapest-pastel: #e5e1e6;
--budapest-pastel-rgb: 229 225 230;
--budapest-pastel-oklch: oklch(0.914 0.008 319.4);
}
.element {
color: var(--budapest-pastel);
background-color: hsl(288 9% 89%);
border-color: oklch(0.914 0.008 319.4);
}Tailwind CSS v4
@theme {
--color-budapest-pastel: #e5e1e6;
--color-budapest-pastel-50: #f6f4f6;
--color-budapest-pastel-100: #e9e7e9;
--color-budapest-pastel-200: #d6d3d6;
--color-budapest-pastel-300: #b9b6ba;
--color-budapest-pastel-400: #a09da1;
--color-budapest-pastel-500: #888489;
--color-budapest-pastel-600: #737074;
--color-budapest-pastel-700: #5c5a5d;
--color-budapest-pastel-800: #434144;
--color-budapest-pastel-900: #2f2d2f;
--color-budapest-pastel-950: #1b1a1c;
}SCSS
$budapest-pastel: #e5e1e6;
$budapest-pastel-rgb: 229, 225, 230;
$budapest-pastel-light: mix(#fff, $budapest-pastel, 20%);
$budapest-pastel-dark: mix(#000, $budapest-pastel, 20%);
.element {
color: $budapest-pastel;
box-shadow: 0 0 0 2px rgba($budapest-pastel, 0.35);
}