色名 · #A3B1F2
Wondrous Wisteria
Wondrous Wisteriaは#A3B1F2：rgb(163 177 242)、hsl(229 75% 79%)、oklch(0.774 0.094 274.6)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Blue mean? → · Wondrous Wisteria color name →
#A3B1F2
oklch(0.774 0.094 274.6)
カラー変換
- HEX
- #a3b1f2
- RGB
- rgb(163 177 242)
- HSL
- hsl(229 75% 79%)
- HWB
- hwb(229 64% 5%)
- OKLCH
- oklch(0.774 0.094 274.6)
- OKLab
- oklab(0.774 0.008 -0.094)
- CIE Lab
- lab(72.92 6.27 -34.36)
- LCH
- lch(72.92 34.93 280.3)
- CMYK
- cmyk(33% 27% 0% 5%)
ティント · シェード · トーン
ティント
- ACB9F4
- B5C1F5
- BEC8F7
- C7D0F8
- D0D8FA
- D9E0FB
- E2E8FC
- ECEFFD
- F5F7FE
シェード
- 8D99D2
- 7883B4
- 636C96
- 4F5779
- 3C425E
- 2A2F43
- 191C2B
- 0A0C14
- 010103
トーン
- 9FACE6
- 9CA7DB
- 98A2CF
- 959EC4
- 9199B8
- 8E94AD
- 8A8FA2
- 878A96
- 83858B
カラーハーモニー
補色 +180°
- A3B1F2
Wondrous Wisteria
- C8B56D
≈ Canadian Maple
類似色 -30° +30°
- A3B1F2
Wondrous Wisteria
- 81BCEE
≈ Electric Eel
- C3A6E6
≈ Silver Rust
トライアド +120° +240°
- A3B1F2
Wondrous Wisteria
- EBA08D
≈ Tonys Pink
- 84C79B
≈ Foul Green
スプリットコンプリメンタリー +150° +210°
- A3B1F2
Wondrous Wisteria
- E0A974
≈ Sweet Cashew
- A8C07D
≈ Margarita
テトラード +90° +180° +270°
- A3B1F2
Wondrous Wisteria
- E99CAE
≈ Second Blush
- C8B56D
≈ Canadian Maple
- 67C9BD
≈ Bayside
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.07:1 · APCA Lc 40
Ag
AAA黒の上
WCAG 10.12:1 · APCA Lc 62
最適な文字色: #000000
WCAG 10.12:1 (AAA) · APCA Lc 62
Contrast pairs
コードスニペット
CSS
:root {
--wondrous-wisteria: #a3b1f2;
--wondrous-wisteria-rgb: 163 177 242;
--wondrous-wisteria-oklch: oklch(0.774 0.094 274.6);
}
.element {
color: var(--wondrous-wisteria);
background-color: hsl(229 75% 79%);
border-color: oklch(0.774 0.094 274.6);
}Tailwind CSS v4
@theme {
--color-wondrous-wisteria: #a3b1f2;
--color-wondrous-wisteria-50: #eef3ff;
--color-wondrous-wisteria-100: #dfe6ff;
--color-wondrous-wisteria-200: #c9d1fd;
--color-wondrous-wisteria-300: #aab4e8;
--color-wondrous-wisteria-400: #8d9ad7;
--color-wondrous-wisteria-500: #7481c5;
--color-wondrous-wisteria-600: #626da6;
--color-wondrous-wisteria-700: #4e5785;
--color-wondrous-wisteria-800: #374063;
--color-wondrous-wisteria-900: #262c46;
--color-wondrous-wisteria-950: #14192d;
}SCSS
$wondrous-wisteria: #a3b1f2;
$wondrous-wisteria-rgb: 163, 177, 242;
$wondrous-wisteria-light: mix(#fff, $wondrous-wisteria, 20%);
$wondrous-wisteria-dark: mix(#000, $wondrous-wisteria, 20%);
.element {
color: $wondrous-wisteria;
box-shadow: 0 0 0 2px rgba($wondrous-wisteria, 0.35);
}