色名 · #4E5552

Cape Cod

Cape Codは#4E5552：rgb(78 85 82)、hsl(154 4% 32%)、oklch(0.442 0.01 168.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Cape Cod color name →

#4E5552

oklch(0.442 0.01 168.3)

カラー変換

HEX: #4e5552
RGB: rgb(78 85 82)
HSL: hsl(154 4% 32%)
HWB: hwb(154 31% 67%)
OKLCH: oklch(0.442 0.01 168.3)
OKLab: oklab(0.442 -0.01 0.002)
CIE Lab: lab(35.44 -3.39 0.75)
LCH: lch(35.44 3.47 167.5)
CMYK: cmyk(8% 0% 4% 67%)

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

ティント

5E6462
6E7472
7F8482
909593
A2A6A4
B4B7B6
C6C9C8
D9DBDA
ECEDEC

シェード

434946
383D3B
2D312F
232625
191C1A
0F1111
070808
020202
000000

トーン

535956
585D5B
5D625F
626664
676A69
6C6E6D
717372
767777
7B7C7B

カラーハーモニー

補色 +180°

4E5552
Cape Cod
585154
≈ Soft Panther

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 7.64:1 · APCA Lc 87

AAA

黒の上

WCAG 2.74:1 · APCA Lc 15

Fail

最適な文字色: #FFFFFF

WCAG 7.64:1 (AAA) · APCA Lc 87

Contrast pairs

コードスニペット

CSS

:root {
  --cape-cod: #4e5552;
  --cape-cod-rgb: 78 85 82;
  --cape-cod-oklch: oklch(0.442 0.01 168.3);
}

.element {
  color: var(--cape-cod);
  background-color: hsl(154 4% 32%);
  border-color: oklch(0.442 0.01 168.3);
}

Tailwind CSS v4

@theme {
  --color-cape-cod: #4e5552;
  --color-cape-cod-50: #f2f6f5;
  --color-cape-cod-100: #e5e9e7;
  --color-cape-cod-200: #d0d6d3;
  --color-cape-cod-300: #b3b9b6;
  --color-cape-cod-400: #99a09d;
  --color-cape-cod-500: #808885;
  --color-cape-cod-600: #6c7370;
  --color-cape-cod-700: #575c5a;
  --color-cape-cod-800: #3f4341;
  --color-cape-cod-900: #2c2f2d;
  --color-cape-cod-950: #191b1a;
}

SCSS

$cape-cod: #4e5552;
$cape-cod-rgb: 78, 85, 82;
$cape-cod-light: mix(#fff, $cape-cod, 20%);
$cape-cod-dark: mix(#000, $cape-cod, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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