이름 색상 · #BAC2AA

Healing Retreat

Healing Retreat은(는) #BAC2AA: rgb(186 194 170), hsl(80 16% 71%), oklch(0.801 0.034 122.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Gray mean? → · Healing Retreat color name →

#BAC2AA

oklch(0.801 0.034 122.2)

색상 변환

HEX: #bac2aa
RGB: rgb(186 194 170)
HSL: hsl(80 16% 71%)
HWB: hwb(80 67% 24%)
OKLCH: oklch(0.801 0.034 122.2)
OKLab: oklab(0.801 -0.018 0.029)
CIE Lab: lab(77.3 -6.07 11.13)
LCH: lch(77.3 12.68 118.6)
CMYK: cmyk(4% 0% 12% 24%)

틴트 · 셰이드 · 톤

틴트

C1C8B2
C7CEBB
CED4C3
D5DACB
DCE0D4
E3E6DC
EAECE5
F1F3EE
F8F9F6

셰이드

A1A893
898F7D
727768
5C6053
46493F
32342D
1E201B
0D0E0B
020201

톤

B4BBA6
AEB4A2
A8AE9D
A2A799
9CA095
979A91
91938C
8B8D88
868684

색 조화

보색 +180°

BAC2AA
Healing Retreat
C2B9D1
≈ Fog Syringa

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 1.84:1 · APCA Lc 35

Fail

검은색 위

WCAG 11.38:1 · APCA Lc 68

AAA

가장 좋은 글자색: #000000

WCAG 11.38:1 (AAA) · APCA Lc 68

Contrast pairs

코드 스니펫

CSS

:root {
  --healing-retreat: #bac2aa;
  --healing-retreat-rgb: 186 194 170;
  --healing-retreat-oklch: oklch(0.801 0.034 122.2);
}

.element {
  color: var(--healing-retreat);
  background-color: hsl(80 16% 71%);
  border-color: oklch(0.801 0.034 122.2);
}

Tailwind CSS v4

@theme {
  --color-healing-retreat: #bac2aa;
  --color-healing-retreat-50: #f3f7ec;
  --color-healing-retreat-100: #e5eade;
  --color-healing-retreat-200: #d1d7c7;
  --color-healing-retreat-300: #b3bba8;
  --color-healing-retreat-400: #9ba28c;
  --color-healing-retreat-500: #828a71;
  --color-healing-retreat-600: #6e7560;
  --color-healing-retreat-700: #585d4d;
  --color-healing-retreat-800: #414437;
  --color-healing-retreat-900: #2d2f26;
  --color-healing-retreat-950: #1a1c14;
}

SCSS

$healing-retreat: #bac2aa;
$healing-retreat-rgb: 186, 194, 170;
$healing-retreat-light: mix(#fff, $healing-retreat, 20%);
$healing-retreat-dark: mix(#000, $healing-retreat, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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