Adlandırılmış renk · #F4D9B1
Captivating Cream
Captivating Cream, #F4D9B1: rgb(244 217 177), hsl(36 75% 83%), oklch(0.898 0.06 77.5). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Orange mean? → · Captivating Cream color name →
#F4D9B1
oklch(0.898 0.06 77.5)
Renk dönüşümleri
- 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%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F5DDB9
- F6E1C1
- F7E4C9
- F9E8D0
- FAECD8
- FBF0E0
- FCF4E8
- FDF7EF
- FEFBF7
Koyu tonlar
- D4BC99
- B5A183
- 97866C
- 7A6C57
- 5E5342
- 443B2F
- 2B251C
- 14110C
- 030201
Gri tonlar
- E8D0AC
- DCC7A7
- D0BEA3
- C4B59E
- B8AC99
- ADA394
- A19A8F
- 96918A
- 8B8985
Renk uyumları
Tamamlayıcı +180°
- F4D9B1
Captivating Cream
- C9DFFF
≈ Arc Light
Analog -30° +30°
- F4D9B1
Captivating Cream
- FFD2BD
≈ Vienna Sausage
- E1E1B3
≈ Schabziger Green
Üçlü +120° +240°
- F4D9B1
Captivating Cream
- AEEAEB
≈ Spearmint Water
- EED1F8
≈ Rose Dragée
Bölünmüş tamamlayıcı +150° +210°
- F4D9B1
Captivating Cream
- B4E6FD
≈ Frozen Landscape
- DBD9FF
≈ Transparent Blue
Dörtlü +90° +180° +270°
- F4D9B1
Captivating Cream
- B7EBD5
≈ Mediterranean Mist
- C9DFFF
≈ Arc Light
- FDCEE5
≈ Classic Rose
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.36:1 · APCA Lc 18
Ag
AAASiyah üzerinde
WCAG 15.40:1 · APCA Lc 86
En iyi metin rengi: #000000
WCAG 15.40:1 (AAA) · APCA Lc 86
Contrast pairs
Kod parçacıkları
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);
}