色名 · #A3BEC4
Clear Vista
Clear Vistaは#A3BEC4：rgb(163 190 196)、hsl(191 22% 70%)、oklch(0.783 0.031 212.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Gray mean? → · Clear Vista color name →
#A3BEC4
oklch(0.783 0.031 212.6)
カラー変換
- HEX
- #a3bec4
- RGB
- rgb(163 190 196)
- HSL
- hsl(191 22% 70%)
- HWB
- hwb(191 64% 23%)
- OKLCH
- oklch(0.783 0.031 212.6)
- OKLab
- oklab(0.783 -0.026 -0.016)
- CIE Lab
- lab(75.08 -8.54 -6.28)
- LCH
- lch(75.08 10.6 216.3)
- CMYK
- cmyk(17% 3% 0% 23%)
ティント · シェード · トーン
ティント
- ACC4CA
- B5CBD0
- BED1D5
- C7D8DB
- D0DEE1
- DAE5E7
- E3EBED
- ECF2F3
- F6F8F9
シェード
- 8DA5AA
- 788C91
- 637578
- 4F5E61
- 3C484A
- 2A3335
- 191F21
- 0A0D0E
- 010202
トーン
- A0B8BD
- 9CB1B6
- 99ABAF
- 95A5A8
- 929FA1
- 8E989B
- 8B9294
- 878C8D
- 848687
カラーハーモニー
補色 +180°
- A3BEC4
Clear Vista
- CBB2AC
≈ Garden Snail
類似色 -30° +30°
- A3BEC4
Clear Vista
- A4BFBA
≈ Botanical Bliss
- A8BBCB
≈ Wood Pigeon
トライアド +120° +240°
- A3BEC4
Clear Vista
- C5B2C1
≈ Masked Mauve
- BFB8A3
≈ Tidal Foam
スプリットコンプリメンタリー +150° +210°
- A3BEC4
Clear Vista
- CAB1B6
≈ Izmir Pink
- C7B5A5
≈ Cool Beige
テトラード +90° +180° +270°
- A3BEC4
Clear Vista
- BCB4C9
≈ Wedding Flowers
- CBB2AC
≈ Garden Snail
- B5BCA7
≈ Tickled Crow
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.95:1 · APCA Lc 38
Ag
AAA黒の上
WCAG 10.71:1 · APCA Lc 65
最適な文字色: #000000
WCAG 10.71:1 (AAA) · APCA Lc 65
Contrast pairs
コードスニペット
CSS
:root {
--clear-vista: #a3bec4;
--clear-vista-rgb: 163 190 196;
--clear-vista-oklch: oklch(0.783 0.031 212.6);
}
.element {
color: var(--clear-vista);
background-color: hsl(191 22% 70%);
border-color: oklch(0.783 0.031 212.6);
}Tailwind CSS v4
@theme {
--color-clear-vista: #a3bec4;
--color-clear-vista-50: #ecf8fb;
--color-clear-vista-100: #ddebee;
--color-clear-vista-200: #c6d8dc;
--color-clear-vista-300: #a7bcc1;
--color-clear-vista-400: #8ba4a9;
--color-clear-vista-500: #6f8c92;
--color-clear-vista-600: #5f767c;
--color-clear-vista-700: #4b5f63;
--color-clear-vista-800: #364548;
--color-clear-vista-900: #253032;
--color-clear-vista-950: #141c1e;
}SCSS
$clear-vista: #a3bec4;
$clear-vista-rgb: 163, 190, 196;
$clear-vista-light: mix(#fff, $clear-vista, 20%);
$clear-vista-dark: mix(#000, $clear-vista, 20%);
.element {
color: $clear-vista;
box-shadow: 0 0 0 2px rgba($clear-vista, 0.35);
}