Nazwany kolor · #F4D9B1
Captivating Cream
Captivating Cream to #F4D9B1: rgb(244 217 177), hsl(36 75% 83%), oklch(0.898 0.06 77.5). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Captivating Cream color name →
#F4D9B1
oklch(0.898 0.06 77.5)
Konwersje koloru
- HEX
- #f4d9b1
- RGB
- rgb(244 217 177)
- HSL
- hsl(36 75% 83%)
- HWB
- hwb(36 69% 4%)
- OKLCH
- oklch(0.898 0.06 77.5)
- OKLab
- oklab(0.898 0.013 0.059)
- CIE Lab
- lab(88.23 5.33 23.39)
- LCH
- lch(88.23 23.99 77.2)
- CMYK
- cmyk(0% 11% 27% 4%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5DDB9
- F6E1C1
- F7E4C9
- F9E8D0
- FAECD8
- FBF0E0
- FCF4E8
- FDF7EF
- FEFBF7
Odcienie ciemniejsze
- D4BC99
- B5A183
- 97866C
- 7A6C57
- 5E5342
- 443B2F
- 2B251C
- 14110C
- 030201
Tony
- E8D0AC
- DCC7A7
- D0BEA3
- C4B59E
- B8AC99
- ADA394
- A19A8F
- 96918A
- 8B8985
Harmonie kolorów
Komplementarna +180°
- F4D9B1
Captivating Cream
- C9DFFF
≈ Arc Light
Analogowa -30° +30°
- F4D9B1
Captivating Cream
- FFD2BD
≈ Vienna Sausage
- E1E1B3
≈ Schabziger Green
Triada +120° +240°
- F4D9B1
Captivating Cream
- AEEAEB
≈ Spearmint Water
- EED1F8
≈ Rose Dragée
Komplementarna rozszczepiona +150° +210°
- F4D9B1
Captivating Cream
- B4E6FD
≈ Frozen Landscape
- DBD9FF
≈ Transparent Blue
Tetrada +90° +180° +270°
- F4D9B1
Captivating Cream
- B7EBD5
≈ Mediterranean Mist
- C9DFFF
≈ Arc Light
- FDCEE5
≈ Classic Rose
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.36:1 · APCA Lc 18
Ag
AAANa czerni
WCAG 15.40:1 · APCA Lc 86
Najlepszy kolor tekstu: #000000
WCAG 15.40:1 (AAA) · APCA Lc 86
Contrast pairs
Fragmenty kodu
CSS
:root {
--captivating-cream: #f4d9b1;
--captivating-cream-rgb: 244 217 177;
--captivating-cream-oklch: oklch(0.898 0.06 77.5);
}
.element {
color: var(--captivating-cream);
background-color: hsl(36 75% 83%);
border-color: oklch(0.898 0.06 77.5);
}Tailwind CSS v4
@theme {
--color-captivating-cream: #f4d9b1;
--color-captivating-cream-50: #fff4e2;
--color-captivating-cream-100: #f3e6d2;
--color-captivating-cream-200: #e2d2b8;
--color-captivating-cream-300: #c8b495;
--color-captivating-cream-400: #b39a76;
--color-captivating-cream-500: #9d8158;
--color-captivating-cream-600: #846e4b;
--color-captivating-cream-700: #6a583c;
--color-captivating-cream-800: #4f402a;
--color-captivating-cream-900: #372c1d;
--color-captivating-cream-950: #22190d;
}SCSS
$captivating-cream: #f4d9b1;
$captivating-cream-rgb: 244, 217, 177;
$captivating-cream-light: mix(#fff, $captivating-cream, 20%);
$captivating-cream-dark: mix(#000, $captivating-cream, 20%);
.element {
color: $captivating-cream;
box-shadow: 0 0 0 2px rgba($captivating-cream, 0.35);
}