Color con nombre · #C4AB86
Croissant
Croissant es #C4AB86: rgb(196 171 134), hsl(36 34% 65%), oklch(0.754 0.058 77.4). Mira tintes, sombras, armonías, contraste WCAG y APCA, y código CSS, Tailwind v4 y SCSS.
What does Orange mean? → · Croissant color name →
#C4AB86
oklch(0.754 0.058 77.4)
Conversiones de color
- HEX
- #c4ab86
- RGB
- rgb(196 171 134)
- HSL
- hsl(36 34% 65%)
- HWB
- hwb(36 53% 23%)
- OKLCH
- oklch(0.754 0.058 77.4)
- OKLab
- oklab(0.754 0.013 0.057)
- CIE Lab
- lab(71.5 5.33 22.64)
- LCH
- lch(71.5 23.25 76.8)
- CMYK
- cmyk(0% 13% 32% 23%)
Tintes · Sombras · Tonos
Tintes
- CAB392
- D0BB9E
- D6C4AA
- DCCCB6
- E1D4C2
- E7DDCE
- EDE5DA
- F3EEE6
- F9F6F3
Sombras
- AA9474
- 917E62
- 786851
- 615440
- 4A4030
- 352D21
- 211B13
- 0E0B06
- 020101
Tonos
- BDA786
- B6A285
- AF9E85
- A89A84
- A29584
- 9B9183
- 948D82
- 8D8982
- 878481
Armonías de color
Complementario +180°
- C4AB86
Croissant
- 98B1D4
≈ Heartsong
Análogo -30° +30°
- C4AB86
Croissant
- CFA590
≈ Amber Grey
- B3B288
≈ Sumptuous Sage
Triádico +120° +240°
- C4AB86
Croissant
- 83BBBC
≈ Misty Cold Sea
- BFA4C8
≈ Pale Grape
Complementario dividido +150° +210°
- C4AB86
Croissant
- 88B7CC
≈ Blue Bird Morning
- ACAAD3
≈ Monastic
Tetrádico +90° +180° +270°
- C4AB86
Croissant
- 8CBBA8
≈ Lichen
- 98B1D4
≈ Heartsong
- CCA1B6
≈ Quilted Heart
Contraste y accesibilidad
Ag
FailSobre blanco
WCAG 2.20:1 · APCA Lc 43
Ag
AAASobre negro
WCAG 9.51:1 · APCA Lc 59
Mejor color de texto: #000000
WCAG 9.51:1 (AAA) · APCA Lc 59
Contrast pairs
Fragmentos de código
CSS
:root {
--croissant: #c4ab86;
--croissant-rgb: 196 171 134;
--croissant-oklch: oklch(0.754 0.058 77.4);
}
.element {
color: var(--croissant);
background-color: hsl(36 34% 65%);
border-color: oklch(0.754 0.058 77.4);
}Tailwind CSS v4
@theme {
--color-croissant: #c4ab86;
--color-croissant-50: #fef4e3;
--color-croissant-100: #f2e6d3;
--color-croissant-200: #e2d2b9;
--color-croissant-300: #c7b596;
--color-croissant-400: #b29b78;
--color-croissant-500: #9c825a;
--color-croissant-600: #846e4d;
--color-croissant-700: #6a583d;
--color-croissant-800: #4e402b;
--color-croissant-900: #362c1d;
--color-croissant-950: #21190d;
}SCSS
$croissant: #c4ab86;
$croissant-rgb: 196, 171, 134;
$croissant-light: mix(#fff, $croissant, 20%);
$croissant-dark: mix(#000, $croissant, 20%);
.element {
color: $croissant;
box-shadow: 0 0 0 2px rgba($croissant, 0.35);
}