이름 색상 · #6B6A6C

Scapa Flow

Scapa Flow은(는) #6B6A6C: rgb(107 106 108), hsl(270 1% 42%), oklch(0.526 0.003 308.4). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.

What does Gray mean? → · Scapa Flow color name →

#6B6A6C

oklch(0.526 0.003 308.4)

색상 변환

HEX: #6b6a6c
RGB: rgb(107 106 108)
HSL: hsl(270 1% 42%)
HWB: hwb(270 42% 58%)
OKLCH: oklch(0.526 0.003 308.4)
OKLab: oklab(0.526 0.002 -0.003)
CIE Lab: lab(44.96 0.71 -0.98)
LCH: lch(44.96 1.21 305.9)
CMYK: cmyk(1% 2% 0% 58%)

틴트 · 셰이드 · 톤

틴트

79787A
878687
959496
A3A3A4
B2B2B3
C1C1C2
D0D0D1
E0DFE0
EFEFEF

셰이드

5C5B5D
4E4D4E
3F3F40
323132
252425
181819
0D0D0D
040404
000000

톤

6D6C6E
6F6E70
717172
737374
757576
787778
7A797A
7C7C7C
7E7E7E

색 조화

보색 +180°

6B6A6C
Scapa Flow
6A6B69
≈ Iron-ic

유사색 -30° +30°

삼각 배색 +120° +240°

분열 보색 +150° +210°

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

대비 및 접근성

흰색 위

WCAG 5.38:1 · APCA Lc 77

검은색 위

WCAG 3.90:1 · APCA Lc 25

Fail

가장 좋은 글자색: #FFFFFF

WCAG 5.38:1 (AA) · APCA Lc 77

Contrast pairs

코드 스니펫

CSS

:root {
  --scapa-flow: #6b6a6c;
  --scapa-flow-rgb: 107 106 108;
  --scapa-flow-oklch: oklch(0.526 0.003 308.4);
}

.element {
  color: var(--scapa-flow);
  background-color: hsl(270 1% 42%);
  border-color: oklch(0.526 0.003 308.4);
}

Tailwind CSS v4

@theme {
  --color-scapa-flow: #6b6a6c;
  --color-scapa-flow-50: #f5f5f6;
  --color-scapa-flow-100: #e8e7e9;
  --color-scapa-flow-200: #d4d4d5;
  --color-scapa-flow-300: #b8b7b9;
  --color-scapa-flow-400: #9f9ea0;
  --color-scapa-flow-500: #878588;
  --color-scapa-flow-600: #727173;
  --color-scapa-flow-700: #5b5a5c;
  --color-scapa-flow-800: #434243;
  --color-scapa-flow-900: #2e2e2e;
  --color-scapa-flow-950: #1b1a1b;
}

SCSS

$scapa-flow: #6b6a6c;
$scapa-flow-rgb: 107, 106, 108;
$scapa-flow-light: mix(#fff, $scapa-flow, 20%);
$scapa-flow-dark: mix(#000, $scapa-flow, 20%);

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

비슷한 이름 색상

Palettes with similar colors

도구에서 열기

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