Nazwany kolor · #F4DBDC
Lovely Harmony
Lovely Harmony to #F4DBDC: rgb(244 219 220), hsl(358 53% 91%), oklch(0.912 0.028 14.9). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Lovely Harmony color name →
#F4DBDC
oklch(0.912 0.028 14.9)
Konwersje koloru
- HEX
- #f4dbdc
- RGB
- rgb(244 219 220)
- HSL
- hsl(358 53% 91%)
- HWB
- hwb(358 86% 4%)
- OKLCH
- oklch(0.912 0.028 14.9)
- OKLab
- oklab(0.912 0.027 0.007)
- CIE Lab
- lab(89.51 9.03 2.82)
- LCH
- lch(89.51 9.46 17.3)
- CMYK
- cmyk(0% 10% 10% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5DFDF
- F6E2E3
- F7E6E6
- F9E9EA
- FAEDED
- FBF1F1
- FCF4F4
- FDF8F8
- FEFBFB
Odcienie ciemniejsze
- D4BEBF
- B5A2A3
- 978788
- 7A6D6E
- 5E5454
- 443C3C
- 2B2626
- 141111
- 030202
Tony
- E8D2D2
- DCC8C9
- D0BFBF
- C4B6B6
- B8ACAD
- ADA3A4
- A19A9B
- 969192
- 8B8989
Harmonie kolorów
Komplementarna +180°
- F4DBDC
Lovely Harmony
- CEE8E8
≈ Field Frost
Analogowa -30° +30°
- F4DBDC
Lovely Harmony
- F0DBE6
≈ Mountain Heather
- F3DDD3
≈ Ambrosia Salad
Triada +120° +240°
- F4DBDC
Lovely Harmony
- DAE6D4
≈ Frostee
- D6E3F5
≈ Aquarelle Purple
Komplementarna rozszczepiona +150° +210°
- F4DBDC
Lovely Harmony
- D2E8DD
≈ Light Light Lichen
- CFE6F0
≈ First Frost
Tetrada +90° +180° +270°
- F4DBDC
Lovely Harmony
- E4E3CF
≈ Yoga Daze
- CEE8E8
≈ Field Frost
- DFE0F4
≈ Lower Lavender
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.31:1 · APCA Lc 15
Ag
AAANa czerni
WCAG 16.01:1 · APCA Lc 88
Najlepszy kolor tekstu: #000000
WCAG 16.01:1 (AAA) · APCA Lc 88
Contrast pairs
Fragmenty kodu
CSS
:root {
--lovely-harmony: #f4dbdc;
--lovely-harmony-rgb: 244 219 220;
--lovely-harmony-oklch: oklch(0.912 0.028 14.9);
}
.element {
color: var(--lovely-harmony);
background-color: hsl(358 53% 91%);
border-color: oklch(0.912 0.028 14.9);
}Tailwind CSS v4
@theme {
--color-lovely-harmony: #f4dbdc;
--color-lovely-harmony-50: #fdf2f2;
--color-lovely-harmony-100: #f1e4e4;
--color-lovely-harmony-200: #e0d0d0;
--color-lovely-harmony-300: #c5b2b2;
--color-lovely-harmony-400: #ae9899;
--color-lovely-harmony-500: #987f80;
--color-lovely-harmony-600: #806c6d;
--color-lovely-harmony-700: #675657;
--color-lovely-harmony-800: #4c3f40;
--color-lovely-harmony-900: #342b2c;
--color-lovely-harmony-950: #201819;
}SCSS
$lovely-harmony: #f4dbdc;
$lovely-harmony-rgb: 244, 219, 220;
$lovely-harmony-light: mix(#fff, $lovely-harmony, 20%);
$lovely-harmony-dark: mix(#000, $lovely-harmony, 20%);
.element {
color: $lovely-harmony;
box-shadow: 0 0 0 2px rgba($lovely-harmony, 0.35);
}