色名 · #BDBCC4

Silver Fox

Silver Foxは#BDBCC4：rgb(189 188 196)、hsl(248 6% 75%)、oklch(0.798 0.011 291.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Silver Fox color name →

#BDBCC4

oklch(0.798 0.011 291.9)

カラー変換

HEX: #bdbcc4
RGB: rgb(189 188 196)
HSL: hsl(248 6% 75%)
HWB: hwb(248 74% 23%)
OKLCH: oklch(0.798 0.011 291.9)
OKLab: oklab(0.798 0.004 -0.01)
CIE Lab: lab(76.51 1.49 -3.92)
LCH: lch(76.51 4.19 290.8)
CMYK: cmyk(4% 4% 0% 23%)

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

ティント

C3C3CA
CAC9D0
D0D0D5
D7D6DB
DEDDE1
E4E4E7
EBEBED
F2F1F3
F8F8F9

シェード

A4A3AA
8C8B91
747378
5D5D61
47474A
333235
1F1F21
0D0D0E
020202

トーン

B7B6BD
B0B0B6
AAAAAF
A4A4A8
9E9DA1
98979B
929294
8C8C8D
868687

カラーハーモニー

補色 +180°

BDBCC4
Silver Fox
BDBEB6
≈ Argos

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 1.88:1 · APCA Lc 36

Fail

黒の上

WCAG 11.15:1 · APCA Lc 67

AAA

最適な文字色: #000000

WCAG 11.15:1 (AAA) · APCA Lc 67

Contrast pairs

コードスニペット

CSS

:root {
  --silver-fox: #bdbcc4;
  --silver-fox-rgb: 189 188 196;
  --silver-fox-oklch: oklch(0.798 0.011 291.9);
}

.element {
  color: var(--silver-fox);
  background-color: hsl(248 6% 75%);
  border-color: oklch(0.798 0.011 291.9);
}

Tailwind CSS v4

@theme {
  --color-silver-fox: #bdbcc4;
  --color-silver-fox-50: #f5f4f8;
  --color-silver-fox-100: #e8e7eb;
  --color-silver-fox-200: #d4d3d9;
  --color-silver-fox-300: #b7b6bd;
  --color-silver-fox-400: #9e9da5;
  --color-silver-fox-500: #86858d;
  --color-silver-fox-600: #717177;
  --color-silver-fox-700: #5b5a60;
  --color-silver-fox-800: #424246;
  --color-silver-fox-900: #2e2d30;
  --color-silver-fox-950: #1a1a1d;
}

SCSS

$silver-fox: #bdbcc4;
$silver-fox-rgb: 189, 188, 196;
$silver-fox-light: mix(#fff, $silver-fox, 20%);
$silver-fox-dark: mix(#000, $silver-fox, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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