이름 색상 · #BA6671

Slate Rose

Slate Rose은(는) #BA6671: rgb(186 102 113), hsl(352 38% 56%), oklch(0.609 0.108 12.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Red mean? → · Slate Rose color name →

#BA6671

oklch(0.609 0.108 12.4)

색상 변환

HEX: #ba6671
RGB: rgb(186 102 113)
HSL: hsl(352 38% 56%)
HWB: hwb(352 40% 27%)
OKLCH: oklch(0.609 0.108 12.4)
OKLab: oklab(0.609 0.105 0.023)
CIE Lab: lab(53.44 35.26 9.62)
LCH: lch(53.44 36.55 15.3)
CMYK: cmyk(0% 45% 39% 27%)

틴트 · 셰이드 · 톤

틴트

C2757E
CA848C
D19399
D9A2A7
E0B2B6
E6C1C4
EDD0D2
F3E0E1
F9EFF0

셰이드

A15861
894A52
723C43
5C2F35
462327
32171A
1E0C0E
0D0404
020001

톤

B56973
B06C74
AA6F76
A57277
9F7579
99777A
93797C
8D7C7D
877E7F

색 조화

보색 +180°

BA6671
Slate Rose
009693
≈ Intermezzo

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 4.01:1 · APCA Lc 67

Fail

검은색 위

WCAG 5.22:1 · APCA Lc 35

가장 좋은 글자색: #000000

WCAG 5.22:1 (AA) · APCA Lc 35

Contrast pairs

코드 스니펫

CSS

:root {
  --slate-rose: #ba6671;
  --slate-rose-rgb: 186 102 113;
  --slate-rose-oklch: oklch(0.609 0.108 12.4);
}

.element {
  color: var(--slate-rose);
  background-color: hsl(352 38% 56%);
  border-color: oklch(0.609 0.108 12.4);
}

Tailwind CSS v4

@theme {
  --color-slate-rose: #ba6671;
  --color-slate-rose-50: #ffe9eb;
  --color-slate-rose-100: #ffdadd;
  --color-slate-rose-200: #ffc2c6;
  --color-slate-rose-300: #e9a1a6;
  --color-slate-rose-400: #d6838d;
  --color-slate-rose-500: #c26672;
  --color-slate-rose-600: #a45661;
  --color-slate-rose-700: #84454d;
  --color-slate-rose-800: #623139;
  --color-slate-rose-900: #452227;
  --color-slate-rose-950: #2c1115;
}

SCSS

$slate-rose: #ba6671;
$slate-rose-rgb: 186, 102, 113;
$slate-rose-light: mix(#fff, $slate-rose, 20%);
$slate-rose-dark: mix(#000, $slate-rose, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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