色名 · #5F534E

Spirit Rock

Spirit Rockは#5F534E：rgb(95 83 78)、hsl(18 10% 34%)、oklch(0.452 0.018 44)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Spirit Rock color name →

#5F534E

oklch(0.452 0.018 44)

カラー変換

HEX: #5f534e
RGB: rgb(95 83 78)
HSL: hsl(18 10% 34%)
HWB: hwb(18 31% 63%)
OKLCH: oklch(0.452 0.018 44)
OKLab: oklab(0.452 0.013 0.012)
CIE Lab: lab(36.38 4.42 4.85)
LCH: lch(36.38 6.56 47.7)
CMYK: cmyk(0% 13% 18% 63%)

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

ティント

6E635E
7D736E
8C837F
9C9490
ACA5A2
BCB6B4
CCC8C6
DDDAD9
EEECEC

シェード

524743
443B38
38302D
2C2523
201B19
15110F
0A0807
030202
000000

トーン

625753
665C58
69605D
6C6562
6F6967
736E6C
767271
797776
7D7B7B

カラーハーモニー

補色 +180°

5F534E
Spirit Rock
4C585D
≈ Submarine Grey

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 7.41:1 · APCA Lc 86

AAA

黒の上

WCAG 2.83:1 · APCA Lc 16

Fail

最適な文字色: #FFFFFF

WCAG 7.41:1 (AAA) · APCA Lc 86

Contrast pairs

コードスニペット

CSS

:root {
  --spirit-rock: #5f534e;
  --spirit-rock-rgb: 95 83 78;
  --spirit-rock-oklch: oklch(0.452 0.018 44);
}

.element {
  color: var(--spirit-rock);
  background-color: hsl(18 10% 34%);
  border-color: oklch(0.452 0.018 44);
}

Tailwind CSS v4

@theme {
  --color-spirit-rock: #5f534e;
  --color-spirit-rock-50: #faf4f1;
  --color-spirit-rock-100: #ede6e3;
  --color-spirit-rock-200: #dbd2ce;
  --color-spirit-rock-300: #c0b5b0;
  --color-spirit-rock-400: #a89b96;
  --color-spirit-rock-500: #91837d;
  --color-spirit-rock-600: #7b6f6a;
  --color-spirit-rock-700: #625854;
  --color-spirit-rock-800: #48403e;
  --color-spirit-rock-900: #322c2a;
  --color-spirit-rock-950: #1e1918;
}

SCSS

$spirit-rock: #5f534e;
$spirit-rock-rgb: 95, 83, 78;
$spirit-rock-light: mix(#fff, $spirit-rock, 20%);
$spirit-rock-dark: mix(#000, $spirit-rock, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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