이름 색상 · #C4AB86
Croissant
Croissant은(는) #C4AB86: rgb(196 171 134), hsl(36 34% 65%), oklch(0.754 0.058 77.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Croissant color name →
#C4AB86
oklch(0.754 0.058 77.4)
색상 변환
- 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%)
틴트 · 셰이드 · 톤
틴트
- CAB392
- D0BB9E
- D6C4AA
- DCCCB6
- E1D4C2
- E7DDCE
- EDE5DA
- F3EEE6
- F9F6F3
셰이드
- AA9474
- 917E62
- 786851
- 615440
- 4A4030
- 352D21
- 211B13
- 0E0B06
- 020101
톤
- BDA786
- B6A285
- AF9E85
- A89A84
- A29584
- 9B9183
- 948D82
- 8D8982
- 878481
색 조화
보색 +180°
- C4AB86
Croissant
- 98B1D4
≈ Heartsong
유사색 -30° +30°
- C4AB86
Croissant
- CFA590
≈ Amber Grey
- B3B288
≈ Sumptuous Sage
삼각 배색 +120° +240°
- C4AB86
Croissant
- 83BBBC
≈ Misty Cold Sea
- BFA4C8
≈ Pale Grape
분열 보색 +150° +210°
- C4AB86
Croissant
- 88B7CC
≈ Blue Bird Morning
- ACAAD3
≈ Monastic
사각 배색 +90° +180° +270°
- C4AB86
Croissant
- 8CBBA8
≈ Lichen
- 98B1D4
≈ Heartsong
- CCA1B6
≈ Quilted Heart
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.20:1 · APCA Lc 43
Ag
AAA검은색 위
WCAG 9.51:1 · APCA Lc 59
가장 좋은 글자색: #000000
WCAG 9.51:1 (AAA) · APCA Lc 59
Contrast pairs
코드 스니펫
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);
}