色名 · #A9BAB1

Quiet Teal

Quiet Tealは#A9BAB1：rgb(169 186 177)、hsl(148 11% 70%)、oklch(0.773 0.023 162.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Gray mean? → · Quiet Teal color name →

#A9BAB1

oklch(0.773 0.023 162.9)

カラー変換

HEX: #a9bab1
RGB: rgb(169 186 177)
HSL: hsl(148 11% 70%)
HWB: hwb(148 66% 27%)
OKLCH: oklch(0.773 0.023 162.9)
OKLab: oklab(0.773 -0.022 0.007)
CIE Lab: lab(73.99 -7.38 2.47)
LCH: lch(73.99 7.79 161.5)
CMYK: cmyk(9% 0% 5% 27%)

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

ティント

B1C1B9
BAC7C0
C2CEC8
CBD5D0
D3DCD7
DCE3DF
E5EAE7
EDF1EF
F6F8F7

シェード

92A199
7C8983
67726C
535C57
3F4642
2C322F
1B1E1C
0A0D0C
010201

トーン

A5B4AC
A1AEA7
9DA8A2
98A29D
949D98
909793
8C918E
888B8A
848685

カラーハーモニー

補色 +180°

A9BAB1
Quiet Teal
C0B0B9
≈ Mischief

類似色 -30° +30°

トライアド +120° +240°

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

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

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

白の上

WCAG 2.02:1 · APCA Lc 39

Fail

黒の上

WCAG 10.34:1 · APCA Lc 63

AAA

最適な文字色: #000000

WCAG 10.34:1 (AAA) · APCA Lc 63

Contrast pairs

コードスニペット

CSS

:root {
  --quiet-teal: #a9bab1;
  --quiet-teal-rgb: 169 186 177;
  --quiet-teal-oklch: oklch(0.773 0.023 162.9);
}

.element {
  color: var(--quiet-teal);
  background-color: hsl(148 11% 70%);
  border-color: oklch(0.773 0.023 162.9);
}

Tailwind CSS v4

@theme {
  --color-quiet-teal: #a9bab1;
  --color-quiet-teal-50: #f0f7f3;
  --color-quiet-teal-100: #e1eae6;
  --color-quiet-teal-200: #ccd7d2;
  --color-quiet-teal-300: #adbbb4;
  --color-quiet-teal-400: #93a39b;
  --color-quiet-teal-500: #798b82;
  --color-quiet-teal-600: #67766e;
  --color-quiet-teal-700: #525e58;
  --color-quiet-teal-800: #3c4540;
  --color-quiet-teal-900: #29302c;
  --color-quiet-teal-950: #171c19;
}

SCSS

$quiet-teal: #a9bab1;
$quiet-teal-rgb: 169, 186, 177;
$quiet-teal-light: mix(#fff, $quiet-teal, 20%);
$quiet-teal-dark: mix(#000, $quiet-teal, 20%);

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

近い色名

Palettes with similar colors

ツールで開く

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