Adlandırılmış renk · #F2E4C7
Cauliflower Cream
Cauliflower Cream, #F2E4C7: rgb(242 228 199), hsl(40 62% 86%), oklch(0.923 0.041 85.3). Açık tonlar, koyu tonlar, uyumlar, WCAG ve APCA kontrastı ile CSS, Tailwind v4 ve SCSS kodunu görün.
What does Yellow mean? → · Cauliflower Cream color name →
#F2E4C7
oklch(0.923 0.041 85.3)
Renk dönüşümleri
- HEX
- #f2e4c7
- RGB
- rgb(242 228 199)
- HSL
- hsl(40 62% 86%)
- HWB
- hwb(40 78% 5%)
- OKLCH
- oklch(0.923 0.041 85.3)
- OKLab
- oklab(0.923 0.003 0.041)
- CIE Lab
- lab(91.16 1.52 16.02)
- LCH
- lch(91.16 16.09 84.6)
- CMYK
- cmyk(0% 6% 18% 5%)
Açık tonlar · Koyu tonlar · Gri tonlar
Açık tonlar
- F3E7CD
- F5E9D2
- F6ECD8
- F7EFDD
- F9F2E3
- FAF4E9
- FBF7EE
- FCFAF4
- FEFCF9
Koyu tonlar
- D2C6AD
- B4A993
- 968D7A
- 797262
- 5E584C
- 433F36
- 2B2821
- 14120E
- 030302
Gri tonlar
- E6DAC0
- DACFB9
- CEC5B1
- C3BBAA
- B7B1A3
- ACA79C
- A19D95
- 96938E
- 8B8A87
Renk uyumları
Tamamlayıcı +180°
- F2E4C7
Cauliflower Cream
- DAE6FF
≈ Veiling Waterfalls
Analog -30° +30°
- F2E4C7
Cauliflower Cream
- FCDFCC
≈ Beach Trail
- E4E9CA
≈ Sylvan Green
Üçlü +120° +240°
- F2E4C7
Cauliflower Cream
- C7EEF3
≈ Icy Breeze
- F4DDF5
≈ Grape Taffy
Bölünmüş tamamlayıcı +150° +210°
- F2E4C7
Cauliflower Cream
- CCEBFE
≈ Veiling Waterfalls
- E7E1FF
≈ Stoic White
Dörtlü +90° +180° +270°
- F2E4C7
Cauliflower Cream
- CAEFE4
≈ Caribbean
- DAE6FF
≈ Veiling Waterfalls
- FDDBE7
≈ Pink Perfume
Kontrast ve erişilebilirlik
Ag
FailBeyaz üzerinde
WCAG 1.25:1 · APCA Lc 13
Ag
AAASiyah üzerinde
WCAG 16.69:1 · APCA Lc 91
En iyi metin rengi: #000000
WCAG 16.69:1 (AAA) · APCA Lc 91
Contrast pairs
Kod parçacıkları
CSS
:root {
--cauliflower-cream: #f2e4c7;
--cauliflower-cream-rgb: 242 228 199;
--cauliflower-cream-oklch: oklch(0.923 0.041 85.3);
}
.element {
color: var(--cauliflower-cream);
background-color: hsl(40 62% 86%);
border-color: oklch(0.923 0.041 85.3);
}Tailwind CSS v4
@theme {
--color-cauliflower-cream: #f2e4c7;
--color-cauliflower-cream-50: #faf5e8;
--color-cauliflower-cream-100: #eee7d9;
--color-cauliflower-cream-200: #dcd4c1;
--color-cauliflower-cream-300: #c0b7a0;
--color-cauliflower-cream-400: #aa9d83;
--color-cauliflower-cream-500: #938567;
--color-cauliflower-cream-600: #7c7058;
--color-cauliflower-cream-700: #635a46;
--color-cauliflower-cream-800: #494132;
--color-cauliflower-cream-900: #332d22;
--color-cauliflower-cream-950: #1f1a11;
}SCSS
$cauliflower-cream: #f2e4c7;
$cauliflower-cream-rgb: 242, 228, 199;
$cauliflower-cream-light: mix(#fff, $cauliflower-cream, 20%);
$cauliflower-cream-dark: mix(#000, $cauliflower-cream, 20%);
.element {
color: $cauliflower-cream;
box-shadow: 0 0 0 2px rgba($cauliflower-cream, 0.35);
}