이름 색상 · #CED0D9

Naturally Calm

Naturally Calm은(는) #CED0D9: rgb(206 208 217), hsl(229 13% 83%), oklch(0.859 0.013 276.1). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Gray mean? → · Naturally Calm color name →

#CED0D9

oklch(0.859 0.013 276.1)

색상 변환

HEX: #ced0d9
RGB: rgb(206 208 217)
HSL: hsl(229 13% 83%)
HWB: hwb(229 81% 15%)
OKLCH: oklch(0.859 0.013 276.1)
OKLab: oklab(0.859 0.001 -0.012)
CIE Lab: lab(83.52 0.55 -4.72)
LCH: lch(83.52 4.75 276.6)
CMYK: cmyk(5% 4% 0% 15%)

틴트 · 셰이드 · 톤

틴트

D3D5DD
D8D9E1
DCDEE4
E1E3E8
E6E7EC
EBECF0
F0F1F4
F5F5F7
FAFAFB

셰이드

B3B5BC
989AA1
7F8086
66676C
4E4F53
38393B
232325
0F1011
020202

톤

C6C8D0
BEBFC7
B6B7BD
AEAFB4
A6A7AB
9E9FA3
97979A
8F8F91
878889

색 조화

보색 +180°

CED0D9
Naturally Calm
D3D1C8
≈ Power Lunch

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 1.53:1 · APCA Lc 25

Fail

검은색 위

WCAG 13.64:1 · APCA Lc 78

AAA

가장 좋은 글자색: #000000

WCAG 13.64:1 (AAA) · APCA Lc 78

Contrast pairs

코드 스니펫

CSS

:root {
  --naturally-calm: #ced0d9;
  --naturally-calm-rgb: 206 208 217;
  --naturally-calm-oklch: oklch(0.859 0.013 276.1);
}

.element {
  color: var(--naturally-calm);
  background-color: hsl(229 13% 83%);
  border-color: oklch(0.859 0.013 276.1);
}

Tailwind CSS v4

@theme {
  --color-naturally-calm: #ced0d9;
  --color-naturally-calm-50: #f4f5f9;
  --color-naturally-calm-100: #e7e7ec;
  --color-naturally-calm-200: #d3d4da;
  --color-naturally-calm-300: #b6b7be;
  --color-naturally-calm-400: #9c9ea6;
  --color-naturally-calm-500: #84868f;
  --color-naturally-calm-600: #6f7179;
  --color-naturally-calm-700: #595a61;
  --color-naturally-calm-800: #414247;
  --color-naturally-calm-900: #2d2e31;
  --color-naturally-calm-950: #1a1a1d;
}

SCSS

$naturally-calm: #ced0d9;
$naturally-calm-rgb: 206, 208, 217;
$naturally-calm-light: mix(#fff, $naturally-calm, 20%);
$naturally-calm-dark: mix(#000, $naturally-calm, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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