이름 색상 · #CC8654

Caramel Bar

Caramel Bar은(는) #CC8654: rgb(204 134 84), hsl(25 54% 56%), oklch(0.681 0.108 55.3). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Orange mean? → · Caramel Bar color name →

#CC8654

oklch(0.681 0.108 55.3)

색상 변환

HEX: #cc8654
RGB: rgb(204 134 84)
HSL: hsl(25 54% 56%)
HWB: hwb(25 33% 20%)
OKLCH: oklch(0.681 0.108 55.3)
OKLab: oklab(0.681 0.062 0.089)
CIE Lab: lab(62.56 23.99 38.2)
LCH: lch(62.56 45.11 57.9)
CMYK: cmyk(0% 34% 59% 20%)

틴트 · 셰이드 · 톤

틴트

D29266
D79E77
DDAA88
E2B699
E8C2AA
EDCEBA
F1DACB
F6E7DD
FBF3EE

셰이드

B17448
97623C
7E5131
654026
4E301B
372111
221308
0F0602
020100

톤

C5865A
BD865F
B68564
AE8569
A7846D
9F8371
988375
908279
88817C

색 조화

보색 +180°

CC8654
Caramel Bar
4CA3D2
≈ Blue Tango

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

사각 배색 +90° +180° +270°

대비 및 접근성

흰색 위

WCAG 2.95:1 · APCA Lc 56

Fail

검은색 위

WCAG 7.10:1 · APCA Lc 46

AAA

가장 좋은 글자색: #000000

WCAG 7.10:1 (AAA) · APCA Lc 46

Contrast pairs

코드 스니펫

CSS

:root {
  --caramel-bar: #cc8654;
  --caramel-bar-rgb: 204 134 84;
  --caramel-bar-oklch: oklch(0.681 0.108 55.3);
}

.element {
  color: var(--caramel-bar);
  background-color: hsl(25 54% 56%);
  border-color: oklch(0.681 0.108 55.3);
}

Tailwind CSS v4

@theme {
  --color-caramel-bar: #cc8654;
  --color-caramel-bar-50: #ffeed8;
  --color-caramel-bar-100: #ffe0c5;
  --color-caramel-bar-200: #f9c9a7;
  --color-caramel-bar-300: #e2aa80;
  --color-caramel-bar-400: #d08d5e;
  --color-caramel-bar-500: #bc7138;
  --color-caramel-bar-600: #9f6031;
  --color-caramel-bar-700: #804d26;
  --color-caramel-bar-800: #5f371b;
  --color-caramel-bar-900: #432612;
  --color-caramel-bar-950: #2b1404;
}

SCSS

$caramel-bar: #cc8654;
$caramel-bar-rgb: 204, 134, 84;
$caramel-bar-light: mix(#fff, $caramel-bar, 20%);
$caramel-bar-dark: mix(#000, $caramel-bar, 20%);

.element {
  color: $caramel-bar;
  box-shadow: 0 0 0 2px rgba($caramel-bar, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

피커 조합 대비 검사기 Studio JSON API