色名 · #BBB7AB

Powered Rock

Powered Rockは#BBB7AB：rgb(187 183 171)、hsl(45 11% 70%)、oklch(0.779 0.017 91.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

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

#BBB7AB

oklch(0.779 0.017 91.6)

カラー変換

HEX: #bbb7ab
RGB: rgb(187 183 171)
HSL: hsl(45 11% 70%)
HWB: hwb(45 67% 27%)
OKLCH: oklch(0.779 0.017 91.6)
OKLab: oklab(0.779 0 0.017)
CIE Lab: lab(74.49 -0.12 6.65)
LCH: lch(74.49 6.65 91)
CMYK: cmyk(0% 2% 9% 27%)

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

ティント

C2BEB3
C8C5BB
CFCCC4
D6D3CC
DDDAD4
E3E2DD
EAE9E5
F1F0EE
F8F8F6

シェード

A29F94
8A877E
737068
5C5A54
464540
32312D
1F1E1B
0D0C0B
020201

トーン

B5B1A7
AFACA2
A9A69E
A3A19A
9D9B95
979691
91908D
8B8B88
868584

カラーハーモニー

補色 +180°

BBB7AB
Powered Rock
B3B7C3
≈ Brother Blue

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 2.00:1 · APCA Lc 39

Fail

黒の上

WCAG 10.47:1 · APCA Lc 63

AAA

最適な文字色: #000000

WCAG 10.47:1 (AAA) · APCA Lc 63

Contrast pairs

コードスニペット

CSS

:root {
  --powered-rock: #bbb7ab;
  --powered-rock-rgb: 187 183 171;
  --powered-rock-oklch: oklch(0.779 0.017 91.6);
}

.element {
  color: var(--powered-rock);
  background-color: hsl(45 11% 70%);
  border-color: oklch(0.779 0.017 91.6);
}

Tailwind CSS v4

@theme {
  --color-powered-rock: #bbb7ab;
  --color-powered-rock-50: #f7f5f0;
  --color-powered-rock-100: #eae8e1;
  --color-powered-rock-200: #d6d4cc;
  --color-powered-rock-300: #bab7ae;
  --color-powered-rock-400: #a29e93;
  --color-powered-rock-500: #8a8679;
  --color-powered-rock-600: #757167;
  --color-powered-rock-700: #5e5b52;
  --color-powered-rock-800: #45423c;
  --color-powered-rock-900: #2f2e29;
  --color-powered-rock-950: #1c1a17;
}

SCSS

$powered-rock: #bbb7ab;
$powered-rock-rgb: 187, 183, 171;
$powered-rock-light: mix(#fff, $powered-rock, 20%);
$powered-rock-dark: mix(#000, $powered-rock, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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