이름 색상 · #BB4422

Devil’s Butterfly

Devil’s Butterfly은(는) #BB4422: rgb(187 68 34), hsl(13 69% 43%), oklch(0.547 0.161 36.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Red mean? → · Devil’s Butterfly color name →

#BB4422

oklch(0.547 0.161 36.2)

색상 변환

HEX: #bb4422
RGB: rgb(187 68 34)
HSL: hsl(13 69% 43%)
HWB: hwb(13 13% 27%)
OKLCH: oklch(0.547 0.161 36.2)
OKLab: oklab(0.547 0.13 0.095)
CIE Lab: lab(46.04 47.65 45.49)
LCH: lch(46.04 65.88 43.7)
CMYK: cmyk(0% 64% 82% 27%)

틴트 · 셰이드 · 톤

틴트

C4593B
CD6C52
D57F67
DC917D
E3A492
EAB6A7
F0C8BD
F5DAD3
FAEDE9

셰이드

A23A1C
8A3016
732611
5C1D0B
461407
320C03
1F0501
0D0200
020000

톤

B64C2F
B2543A
AD5B44
A7614E
A26757
9C6D5F
967268
8F7770
887B78

색 조화

보색 +180°

BB4422
Devil’s Butterfly
007E95
≈ Pagoda

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 5.29:1 · APCA Lc 75

검은색 위

WCAG 3.96:1 · APCA Lc 26

Fail

가장 좋은 글자색: #FFFFFF

WCAG 5.29:1 (AA) · APCA Lc 75

Contrast pairs

코드 스니펫

CSS

:root {
  --devil-s-butterfly: #bb4422;
  --devil-s-butterfly-rgb: 187 68 34;
  --devil-s-butterfly-oklch: oklch(0.547 0.161 36.2);
}

.element {
  color: var(--devil-s-butterfly);
  background-color: hsl(13 69% 43%);
  border-color: oklch(0.547 0.161 36.2);
}

Tailwind CSS v4

@theme {
  --color-devil-s-butterfly: #bb4422;
  --color-devil-s-butterfly-50: #ffe6d4;
  --color-devil-s-butterfly-100: #ffd6c1;
  --color-devil-s-butterfly-200: #ffbda2;
  --color-devil-s-butterfly-300: #fd997a;
  --color-devil-s-butterfly-400: #ed7757;
  --color-devil-s-butterfly-500: #db542f;
  --color-devil-s-butterfly-600: #b94929;
  --color-devil-s-butterfly-700: #953a21;
  --color-devil-s-butterfly-800: #6f2818;
  --color-devil-s-butterfly-900: #4e1b10;
  --color-devil-s-butterfly-950: #340b03;
}

SCSS

$devil-s-butterfly: #bb4422;
$devil-s-butterfly-rgb: 187, 68, 34;
$devil-s-butterfly-light: mix(#fff, $devil-s-butterfly, 20%);
$devil-s-butterfly-dark: mix(#000, $devil-s-butterfly, 20%);

.element {
  color: $devil-s-butterfly;
  box-shadow: 0 0 0 2px rgba($devil-s-butterfly, 0.35);
}

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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