色名 · #828080

Captain Nemo

Captain Nemoは#828080：rgb(130 128 128)、hsl(0 1% 51%)、oklch(0.602 0.002 17.2)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Captain Nemo color name →

#828080

oklch(0.602 0.002 17.2)

カラー変換

HEX: #828080
RGB: rgb(130 128 128)
HSL: hsl(0 1% 51%)
HWB: hwb(0 50% 49%)
OKLCH: oklch(0.602 0.002 17.2)
OKLab: oklab(0.602 0.002 0.001)
CIE Lab: lab(53.76 0.78 0.28)
LCH: lch(53.76 0.83 19.8)
CMYK: cmyk(0% 2% 2% 49%)

ティント · シェード · トーン

ティント

8E8C8C
9A9898
A6A4A4
B2B1B1
BFBDBD
CBCACA
D8D7D7
E5E4E4
F2F2F2

シェード

706E6E
5F5D5D
4E4D4D
3E3D3D
2F2E2E
201F1F
121212
060606
010101

トーン

828080
828080
818080
818080
818080
818080
818080
808080
808080

カラーハーモニー

補色 +180°

828080
Captain Nemo
7F8181
≈ Mt. Rushmore

類似色 -30° +30°

トライアド +120° +240°

スプリットコンプリメンタリー +150° +210°

テトラード +90° +180° +270°

コントラストとアクセシビリティ

白の上

WCAG 3.92:1 · APCA Lc 67

Fail

黒の上

WCAG 5.34:1 · APCA Lc 35

最適な文字色: #000000

WCAG 5.34:1 (AA) · APCA Lc 35

Contrast pairs

コードスニペット

CSS

:root {
  --captain-nemo: #828080;
  --captain-nemo-rgb: 130 128 128;
  --captain-nemo-oklch: oklch(0.602 0.002 17.2);
}

.element {
  color: var(--captain-nemo);
  background-color: hsl(0 1% 51%);
  border-color: oklch(0.602 0.002 17.2);
}

Tailwind CSS v4

@theme {
  --color-captain-nemo: #828080;
  --color-captain-nemo-50: #f6f5f5;
  --color-captain-nemo-100: #e9e7e7;
  --color-captain-nemo-200: #d5d4d4;
  --color-captain-nemo-300: #b8b7b7;
  --color-captain-nemo-400: #a09e9e;
  --color-captain-nemo-500: #888585;
  --color-captain-nemo-600: #737171;
  --color-captain-nemo-700: #5c5a5a;
  --color-captain-nemo-800: #434242;
  --color-captain-nemo-900: #2e2d2e;
  --color-captain-nemo-950: #1b1a1a;
}

SCSS

$captain-nemo: #828080;
$captain-nemo-rgb: 130, 128, 128;
$captain-nemo-light: mix(#fff, $captain-nemo, 20%);
$captain-nemo-dark: mix(#000, $captain-nemo, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

ピッカーペアコントラストチェッカー Studio JSON API