이름 색상 · #CEAA64
Ginger Crunch
Ginger Crunch은(는) #CEAA64: rgb(206 170 100), hsl(40 52% 60%), oklch(0.755 0.098 82.9). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Ginger Crunch color name →
#CEAA64
oklch(0.755 0.098 82.9)
색상 변환
- HEX
- #ceaa64
- RGB
- rgb(206 170 100)
- HSL
- hsl(40 52% 60%)
- HWB
- hwb(40 39% 19%)
- OKLCH
- oklch(0.755 0.098 82.9)
- OKLab
- oklab(0.755 0.012 0.097)
- CIE Lab
- lab(71.77 7.24 40.97)
- LCH
- lch(71.77 41.61 80)
- CMYK
- cmyk(0% 17% 51% 19%)
틴트 · 셰이드 · 톤
틴트
- D3B274
- D8BB84
- DDC394
- E2CCA3
- E7D4B3
- ECDDC2
- F0E5D1
- F5EEE0
- FAF6F0
셰이드
- B39356
- 987D48
- 7F683B
- 66532E
- 4E3F22
- 382D16
- 231B0B
- 0F0B03
- 020100
톤
- C6A668
- BEA26C
- B69E6F
- AE9972
- A69575
- 9F9178
- 978D7A
- 8F897C
- 88847E
색 조화
보색 +180°
- CEAA64
Ginger Crunch
- 8FB0EE
≈ Fly Away
유사색 -30° +30°
- CEAA64
Ginger Crunch
- E19E74
≈ Pecan Veneer
- B0B66C
≈ Lime Rickey
삼각 배색 +120° +240°
- CEAA64
Ginger Crunch
- 57C2CB
≈ Baharroth Blue
- CE9BD4
≈ Ineffable Magenta
분열 보색 +150° +210°
- CEAA64
Ginger Crunch
- 6BBAE4
≈ Norfolk Sky
- B2A4E9
≈ Maximum Blue Purple
사각 배색 +90° +180° +270°
- CEAA64
Ginger Crunch
- 66C4A9
≈ Kauai
- 8FB0EE
≈ Fly Away
- E196B5
≈ Peach Flower
대비 및 접근성
Ag
Fail흰색 위
WCAG 2.19:1 · APCA Lc 43
Ag
AAA검은색 위
WCAG 9.55:1 · APCA Lc 59
가장 좋은 글자색: #000000
WCAG 9.55:1 (AAA) · APCA Lc 59
Contrast pairs
코드 스니펫
CSS
:root {
--ginger-crunch: #ceaa64;
--ginger-crunch-rgb: 206 170 100;
--ginger-crunch-oklch: oklch(0.755 0.098 82.9);
}
.element {
color: var(--ginger-crunch);
background-color: hsl(40 52% 60%);
border-color: oklch(0.755 0.098 82.9);
}Tailwind CSS v4
@theme {
--color-ginger-crunch: #ceaa64;
--color-ginger-crunch-50: #fff4d6;
--color-ginger-crunch-100: #f7e6c3;
--color-ginger-crunch-200: #e8d2a5;
--color-ginger-crunch-300: #cfb47d;
--color-ginger-crunch-400: #bb9958;
--color-ginger-crunch-500: #a67f2e;
--color-ginger-crunch-600: #8c6c29;
--color-ginger-crunch-700: #705620;
--color-ginger-crunch-800: #543e15;
--color-ginger-crunch-900: #3a2b0e;
--color-ginger-crunch-950: #241802;
}SCSS
$ginger-crunch: #ceaa64;
$ginger-crunch-rgb: 206, 170, 100;
$ginger-crunch-light: mix(#fff, $ginger-crunch, 20%);
$ginger-crunch-dark: mix(#000, $ginger-crunch, 20%);
.element {
color: $ginger-crunch;
box-shadow: 0 0 0 2px rgba($ginger-crunch, 0.35);
}