이름 색상 · #C28A35
Butter Base
Butter Base은(는) #C28A35: rgb(194 138 53), hsl(36 57% 48%), oklch(0.674 0.12 74). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Orange mean? → · Butter Base color name →
#C28A35
oklch(0.674 0.12 74)
색상 변환
- HEX
- #c28a35
- RGB
- rgb(194 138 53)
- HSL
- hsl(36 57% 48%)
- HWB
- hwb(36 21% 24%)
- OKLCH
- oklch(0.674 0.12 74)
- OKLab
- oklab(0.674 0.033 0.116)
- CIE Lab
- lab(62.03 16.28 52.18)
- LCH
- lch(62.03 54.66 72.7)
- CMYK
- cmyk(0% 29% 73% 24%)
틴트 · 셰이드 · 톤
틴트
- C8964E
- CFA163
- D5AD78
- DBB98B
- E1C49F
- E8D0B2
- EEDCC5
- F3E7D8
- F9F3EC
셰이드
- A8772D
- 8F6525
- 77531D
- 604215
- 49320E
- 342208
- 201403
- 0E0701
- 020100
톤
- BC8941
- B5894B
- AE8853
- A8875B
- A18662
- 9B8569
- 94846F
- 8D8375
- 87817B
색 조화
보색 +180°
- C28A35
Butter Base
- 6099DF
≈ Little Boy Blue
유사색 -30° +30°
- C28A35
Butter Base
- D37C56
≈ Jack-O-Lantern
- A39A35
≈ Pestulance
삼각 배색 +120° +240°
- C28A35
Butter Base
- 00ACAB
≈ Jade Orchid
- B17FCA
≈ Wisteria
분열 보색 +150° +210°
- C28A35
Butter Base
- 1FA5CD
≈ Sardinia Beaches
- 8E8BDE
≈ Perrywinkle
사각 배색 +90° +180° +270°
- C28A35
Butter Base
- 3DAD82
≈ Divot
- 6099DF
≈ Little Boy Blue
- CA77A8
≈ Strawberry Freeze
대비 및 접근성
Ag
Fail흰색 위
WCAG 3.00:1 · APCA Lc 57
Ag
AA검은색 위
WCAG 6.98:1 · APCA Lc 45
가장 좋은 글자색: #000000
WCAG 6.98:1 (AA) · APCA Lc 45
Contrast pairs
코드 스니펫
CSS
:root {
--butter-base: #c28a35;
--butter-base-rgb: 194 138 53;
--butter-base-oklch: oklch(0.674 0.12 74);
}
.element {
color: var(--butter-base);
background-color: hsl(36 57% 48%);
border-color: oklch(0.674 0.12 74);
}Tailwind CSS v4
@theme {
--color-butter-base: #c28a35;
--color-butter-base-50: #fff1d0;
--color-butter-base-100: #ffe3bc;
--color-butter-base-200: #f2ce9a;
--color-butter-base-300: #dbaf6f;
--color-butter-base-400: #c99345;
--color-butter-base-500: #b57800;
--color-butter-base-600: #996607;
--color-butter-base-700: #7a5108;
--color-butter-base-800: #5c3a05;
--color-butter-base-900: #402804;
--color-butter-base-950: #291600;
}SCSS
$butter-base: #c28a35;
$butter-base-rgb: 194, 138, 53;
$butter-base-light: mix(#fff, $butter-base, 20%);
$butter-base-dark: mix(#000, $butter-base, 20%);
.element {
color: $butter-base;
box-shadow: 0 0 0 2px rgba($butter-base, 0.35);
}