Nazwany kolor · #F4F0DA
Lotus Flower
Lotus Flower to #F4F0DA: rgb(244 240 218), hsl(51 54% 91%), oklch(0.952 0.029 98.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Gray mean? → · Lotus Flower color name →
#F4F0DA
oklch(0.952 0.029 98.5)
Konwersje koloru
- HEX
- #f4f0da
- RGB
- rgb(244 240 218)
- HSL
- hsl(51 54% 91%)
- HWB
- hwb(51 85% 4%)
- OKLCH
- oklch(0.952 0.029 98.5)
- OKLab
- oklab(0.952 -0.004 0.029)
- CIE Lab
- lab(94.67 -1.34 11.18)
- LCH
- lch(94.67 11.26 96.8)
- CMYK
- cmyk(0% 2% 11% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5F2DE
- F6F3E1
- F7F5E5
- F8F6E9
- F9F8ED
- FBF9F0
- FCFBF4
- FDFCF8
- FEFEFB
Odcienie ciemniejsze
- D4D1BD
- B5B2A2
- 979587
- 7A786C
- 5E5D54
- 44433C
- 2B2A25
- 141411
- 030302
Tony
- E8E4D1
- DCD9C7
- D0CDBE
- C4C2B5
- B8B6AC
- ADABA3
- A1A09A
- 969591
- 8B8B89
Harmonie kolorów
Komplementarna +180°
- F4F0DA
Lotus Flower
- EBEEFF
≈ Carte Blanche
Analogowa -30° +30°
- F4F0DA
Lotus Flower
- FDECDB
≈ Flowerbed
- E9F3DF
≈ Diminished Mint
Triada +120° +240°
- F4F0DA
Lotus Flower
- DBF5FD
≈ Glacial Day
- FDE8F6
≈ Dolomite Crystal
Komplementarna rozszczepiona +150° +210°
- F4F0DA
Lotus Flower
- E3F1FF
≈ Wizard White
- F5EAFF
≈ Placebo Fuchsia
Tetrada +90° +180° +270°
- F4F0DA
Lotus Flower
- DAF6F3
≈ Fishious Rend
- EBEEFF
≈ Carte Blanche
- FFE9EC
≈ Pink Sparkle
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.14:1 · APCA Lc 0
Ag
AAANa czerni
WCAG 18.32:1 · APCA Lc 98
Najlepszy kolor tekstu: #000000
WCAG 18.32:1 (AAA) · APCA Lc 98
Contrast pairs
Fragmenty kodu
CSS
:root {
--lotus-flower: #f4f0da;
--lotus-flower-rgb: 244 240 218;
--lotus-flower-oklch: oklch(0.952 0.029 98.5);
}
.element {
color: var(--lotus-flower);
background-color: hsl(51 54% 91%);
border-color: oklch(0.952 0.029 98.5);
}Tailwind CSS v4
@theme {
--color-lotus-flower: #f4f0da;
--color-lotus-flower-50: #f7f5ec;
--color-lotus-flower-100: #eae8dd;
--color-lotus-flower-200: #d7d5c7;
--color-lotus-flower-300: #bab8a7;
--color-lotus-flower-400: #a39f8c;
--color-lotus-flower-500: #8b8771;
--color-lotus-flower-600: #757260;
--color-lotus-flower-700: #5e5b4c;
--color-lotus-flower-800: #454337;
--color-lotus-flower-900: #302e26;
--color-lotus-flower-950: #1c1b14;
}SCSS
$lotus-flower: #f4f0da;
$lotus-flower-rgb: 244, 240, 218;
$lotus-flower-light: mix(#fff, $lotus-flower, 20%);
$lotus-flower-dark: mix(#000, $lotus-flower, 20%);
.element {
color: $lotus-flower;
box-shadow: 0 0 0 2px rgba($lotus-flower, 0.35);
}