이름 색상 · #A9A797

Amazing Boulder

Amazing Boulder은(는) #A9A797: rgb(169 167 151), hsl(53 9% 63%), oklch(0.725 0.023 101.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Gray mean? → · Amazing Boulder color name →

#A9A797

oklch(0.725 0.023 101.1)

색상 변환

HEX: #a9a797
RGB: rgb(169 167 151)
HSL: hsl(53 9% 63%)
HWB: hwb(53 59% 34%)
OKLCH: oklch(0.725 0.023 101.1)
OKLab: oklab(0.725 -0.004 0.022)
CIE Lab: lab(68.32 -1.39 8.58)
LCH: lch(68.32 8.69 99.2)
CMYK: cmyk(0% 1% 11% 34%)

틴트 · 셰이드 · 톤

틴트

B1AFA1
BAB8AB
C2C1B5
CBC9C0
D3D2CA
DCDBD4
E5E4DF
EDEDE9
F6F6F4

셰이드

929183
7C7B6F
67665C
535249
3F3E37
2C2C26
1B1A17
0A0A08
010101

톤

A5A395
A19F92
9C9B90
98978E
94938C
908F89
8C8C87
888885
848482

색 조화

보색 +180°

A9A797
Amazing Boulder
A3A5B5
≈ Curated Lilac

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 2.42:1 · APCA Lc 48

Fail

검은색 위

WCAG 8.66:1 · APCA Lc 54

AAA

가장 좋은 글자색: #000000

WCAG 8.66:1 (AAA) · APCA Lc 54

Contrast pairs

코드 스니펫

CSS

:root {
  --amazing-boulder: #a9a797;
  --amazing-boulder-rgb: 169 167 151;
  --amazing-boulder-oklch: oklch(0.725 0.023 101.1);
}

.element {
  color: var(--amazing-boulder);
  background-color: hsl(53 9% 63%);
  border-color: oklch(0.725 0.023 101.1);
}

Tailwind CSS v4

@theme {
  --color-amazing-boulder: #a9a797;
  --color-amazing-boulder-50: #f6f5ee;
  --color-amazing-boulder-100: #e9e8e0;
  --color-amazing-boulder-200: #d6d5ca;
  --color-amazing-boulder-300: #b9b8ab;
  --color-amazing-boulder-400: #a19f90;
  --color-amazing-boulder-500: #898776;
  --color-amazing-boulder-600: #747264;
  --color-amazing-boulder-700: #5d5b50;
  --color-amazing-boulder-800: #44433a;
  --color-amazing-boulder-900: #2f2e28;
  --color-amazing-boulder-950: #1c1b16;
}

SCSS

$amazing-boulder: #a9a797;
$amazing-boulder-rgb: 169, 167, 151;
$amazing-boulder-light: mix(#fff, $amazing-boulder, 20%);
$amazing-boulder-dark: mix(#000, $amazing-boulder, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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