Cor nomeada · #F3E7B4
Crème de la Crème
Crème de la Crème é #F3E7B4: rgb(243 231 180), hsl(49 72% 83%), oklch(0.925 0.067 96.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Yellow mean? → · Crème de la Crème color name →
#F3E7B4
oklch(0.925 0.067 96.4)
Conversões de cor
- HEX
- #f3e7b4
- RGB
- rgb(243 231 180)
- HSL
- hsl(49 72% 83%)
- HWB
- hwb(49 71% 5%)
- OKLCH
- oklch(0.925 0.067 96.4)
- OKLab
- oklab(0.925 -0.007 0.067)
- CIE Lab
- lab(91.68 -1.5 26.48)
- LCH
- lch(91.68 26.52 93.3)
- CMYK
- cmyk(0% 5% 26% 5%)
Tons claros · Sombras · Tons
Tons claros
- F4E9BC
- F5ECC3
- F7EECB
- F8F1D2
- F9F3DA
- FAF6E1
- FBF8E9
- FDFAF0
- FEFDF8
Sombras
- D3C99C
- B4AB85
- 978F6E
- 7A7358
- 5E5944
- 444030
- 2B281D
- 14130C
- 030302
Tons
- E7DCAF
- DBD2AA
- CFC7A5
- C3BDA0
- B8B29A
- ACA895
- A19E90
- 96948B
- 8B8A85
Harmonias de cor
Complementar +180°
- F3E7B4
Crème de la Crème
- DFE5FF
≈ Lavender Mist
Análoga -30° +30°
- F3E7B4
Crème de la Crème
- FFE0C2
≈ Sand Muffin
- DBEFBF
≈ Fennel Bulb
Tríade +120° +240°
- F3E7B4
Crème de la Crème
- BCF1FF
≈ Northrend
- FFD9F4
≈ Sweet Sachet
Complementar dividida +150° +210°
- F3E7B4
Crème de la Crème
- D2E9FF
≈ Veiling Waterfalls
- EEDFFF
≈ Lavender Savour
Tétrade +90° +180° +270°
- F3E7B4
Crème de la Crème
- B3F6ED
≈ Pale King’s Blue
- DFE5FF
≈ Lavender Mist
- FFDCE2
≈ It’s a Girl!
Contraste e acessibilidade
Ag
FailSobre branco
WCAG 1.24:1 · APCA Lc 12
Ag
AAASobre preto
WCAG 16.90:1 · APCA Lc 92
Melhor cor de texto: #000000
WCAG 16.90:1 (AAA) · APCA Lc 92
Contrast pairs
Trechos de código
CSS
:root {
--creme-de-la-creme: #f3e7b4;
--creme-de-la-creme-rgb: 243 231 180;
--creme-de-la-creme-oklch: oklch(0.925 0.067 96.4);
}
.element {
color: var(--creme-de-la-creme);
background-color: hsl(49 72% 83%);
border-color: oklch(0.925 0.067 96.4);
}Tailwind CSS v4
@theme {
--color-creme-de-la-creme: #f3e7b4;
--color-creme-de-la-creme-50: #faf6e0;
--color-creme-de-la-creme-100: #ede9d0;
--color-creme-de-la-creme-200: #dbd5b5;
--color-creme-de-la-creme-300: #c0b891;
--color-creme-de-la-creme-400: #aa9f71;
--color-creme-de-la-creme-500: #938651;
--color-creme-de-la-creme-600: #7c7245;
--color-creme-de-la-creme-700: #635b37;
--color-creme-de-la-creme-800: #4a4227;
--color-creme-de-la-creme-900: #332e1a;
--color-creme-de-la-creme-950: #1f1a0a;
}SCSS
$creme-de-la-creme: #f3e7b4;
$creme-de-la-creme-rgb: 243, 231, 180;
$creme-de-la-creme-light: mix(#fff, $creme-de-la-creme, 20%);
$creme-de-la-creme-dark: mix(#000, $creme-de-la-creme, 20%);
.element {
color: $creme-de-la-creme;
box-shadow: 0 0 0 2px rgba($creme-de-la-creme, 0.35);
}