Nazwany kolor · #E1EFE2
Soothing Vapour
Soothing Vapour to #E1EFE2: rgb(225 239 226), hsl(124 30% 91%), oklch(0.938 0.023 147.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Soothing Vapour color name →
#E1EFE2
oklch(0.938 0.023 147.4)
Konwersje koloru
- HEX
- #e1efe2
- RGB
- rgb(225 239 226)
- HSL
- hsl(124 30% 91%)
- HWB
- hwb(124 88% 6%)
- OKLCH
- oklch(0.938 0.023 147.4)
- OKLab
- oklab(0.938 -0.019 0.012)
- CIE Lab
- lab(93.12 -6.56 4.63)
- LCH
- lch(93.12 8.03 144.8)
- CMYK
- cmyk(6% 0% 5% 6%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- E4F1E5
- E7F2E8
- EAF4EB
- EDF5EE
- F0F7F0
- F3F9F3
- F6FAF6
- F9FCF9
- FCFDFC
Odcienie ciemniejsze
- C4D0C4
- A7B1A8
- 8B948C
- 707871
- 565C57
- 3E423E
- 272A27
- 121412
- 020303
Tony
- D7E3D8
- CDD8CE
- C3CCC4
- B9C1BA
- AFB6B0
- A6ABA6
- 9CA09C
- 939593
- 898B89
Harmonie kolorów
Komplementarna +180°
- E1EFE2
Soothing Vapour
- F3E5F3
≈ Minute Mauve
Analogowa -30° +30°
- E1EFE2
Soothing Vapour
- E9EDDC
≈ Chrome Green
- DBF0EA
≈ Green Frosting
Triada +120° +240°
- E1EFE2
Soothing Vapour
- E4EAFA
≈ Icy Lilac
- FAE5E2
≈ Sweet Nothing
Komplementarna rozszczepiona +150° +210°
- E1EFE2
Soothing Vapour
- ECE8F8
≈ Bright Dusk
- F8E5EA
≈ Pink Tutu
Tetrada +90° +180° +270°
- E1EFE2
Soothing Vapour
- DDEDF8
≈ Ice Fishing
- F3E5F3
≈ Minute Mauve
- F7E7DC
≈ Grandma’s Cameo
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.19:1 · APCA Lc 9
Ag
AAANa czerni
WCAG 17.64:1 · APCA Lc 95
Najlepszy kolor tekstu: #000000
WCAG 17.64:1 (AAA) · APCA Lc 95
Contrast pairs
Fragmenty kodu
CSS
:root {
--soothing-vapour: #e1efe2;
--soothing-vapour-rgb: 225 239 226;
--soothing-vapour-oklch: oklch(0.938 0.023 147.4);
}
.element {
color: var(--soothing-vapour);
background-color: hsl(124 30% 91%);
border-color: oklch(0.938 0.023 147.4);
}Tailwind CSS v4
@theme {
--color-soothing-vapour: #e1efe2;
--color-soothing-vapour-50: #f1f7f2;
--color-soothing-vapour-100: #e3eae4;
--color-soothing-vapour-200: #ced7cf;
--color-soothing-vapour-300: #b0bbb1;
--color-soothing-vapour-400: #96a297;
--color-soothing-vapour-500: #7d8b7e;
--color-soothing-vapour-600: #6a756a;
--color-soothing-vapour-700: #545e55;
--color-soothing-vapour-800: #3e453e;
--color-soothing-vapour-900: #2a2f2a;
--color-soothing-vapour-950: #181c18;
}SCSS
$soothing-vapour: #e1efe2;
$soothing-vapour-rgb: 225, 239, 226;
$soothing-vapour-light: mix(#fff, $soothing-vapour, 20%);
$soothing-vapour-dark: mix(#000, $soothing-vapour, 20%);
.element {
color: $soothing-vapour;
box-shadow: 0 0 0 2px rgba($soothing-vapour, 0.35);
}