色名 · #A5A495
Whale Watching
Whale Watchingは#A5A495：rgb(165 164 149)、hsl(56 8% 62%)、oklch(0.715 0.021 103.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Whale Watching color name →
#A5A495
oklch(0.715 0.021 103.8)
カラー変換
- HEX
- #a5a495
- RGB
- rgb(165 164 149)
- HSL
- hsl(56 8% 62%)
- HWB
- hwb(56 58% 35%)
- OKLCH
- oklch(0.715 0.021 103.8)
- OKLab
- oklab(0.715 -0.005 0.021)
- CIE Lab
- lab(67.13 -1.65 7.95)
- LCH
- lch(67.13 8.12 101.7)
- CMYK
- cmyk(0% 1% 10% 35%)
ティント · シェード · トーン
ティント
- AEAD9F
- B6B6A9
- BFBFB4
- C8C8BE
- D1D1C9
- DADAD3
- E3E3DE
- ECECE9
- F6F6F4
シェード
- 8F8E81
- 79796D
- 65645A
- 515048
- 3D3D37
- 2B2B26
- 1A1A16
- 0A0A08
- 010101
トーン
- A1A093
- 9D9D91
- 9A998F
- 96958D
- 92928B
- 8F8E88
- 8B8B86
- 878784
- 848482
カラーハーモニー
補色 +180°
- A5A495
Whale Watching
- A1A2B0
≈ Spun Pearl
類似色 -30° +30°
- A5A495
Whale Watching
- ABA195
≈ Pure Cashmere
- 9EA699
≈ Secret Retreat
トライアド +120° +240°
- A5A495
Whale Watching
- 96A6AD
≈ Celestra Grey
- AD9EA6
≈ Laylock
スプリットコンプリメンタリー +150° +210°
- A5A495
Whale Watching
- 9AA4B1
≈ Great Falls
- A89FAD
≈ Goose Wing Grey
テトラード +90° +180° +270°
- A5A495
Whale Watching
- 95A8A7
≈ Mythical Blue
- A1A2B0
≈ Spun Pearl
- B09E9F
≈ Subtle Violet
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.51:1 · APCA Lc 49
Ag
AAA黒の上
WCAG 8.34:1 · APCA Lc 53
最適な文字色: #000000
WCAG 8.34:1 (AAA) · APCA Lc 53
Contrast pairs
コードスニペット
CSS
:root {
--whale-watching: #a5a495;
--whale-watching-rgb: 165 164 149;
--whale-watching-oklch: oklch(0.715 0.021 103.8);
}
.element {
color: var(--whale-watching);
background-color: hsl(56 8% 62%);
border-color: oklch(0.715 0.021 103.8);
}Tailwind CSS v4
@theme {
--color-whale-watching: #a5a495;
--color-whale-watching-50: #f6f6ef;
--color-whale-watching-100: #e9e8e0;
--color-whale-watching-200: #d5d5cb;
--color-whale-watching-300: #b8b8ac;
--color-whale-watching-400: #a09f91;
--color-whale-watching-500: #888777;
--color-whale-watching-600: #737265;
--color-whale-watching-700: #5c5b51;
--color-whale-watching-800: #44433a;
--color-whale-watching-900: #2f2e28;
--color-whale-watching-950: #1b1b16;
}SCSS
$whale-watching: #a5a495;
$whale-watching-rgb: 165, 164, 149;
$whale-watching-light: mix(#fff, $whale-watching, 20%);
$whale-watching-dark: mix(#000, $whale-watching, 20%);
.element {
color: $whale-watching;
box-shadow: 0 0 0 2px rgba($whale-watching, 0.35);
}