色名 · #BA97A9
Violet Fantasy
Violet Fantasyは#BA97A9：rgb(186 151 169)、hsl(329 20% 66%)、oklch(0.714 0.048 346.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Pink mean? → · Violet Fantasy color name →
#BA97A9
oklch(0.714 0.048 346.1)
カラー変換
- HEX
- #ba97a9
- RGB
- rgb(186 151 169)
- HSL
- hsl(329 20% 66%)
- HWB
- hwb(329 59% 27%)
- OKLCH
- oklch(0.714 0.048 346.1)
- OKLab
- oklab(0.714 0.047 -0.012)
- CIE Lab
- lab(66.15 15.7 -4.25)
- LCH
- lch(66.15 16.26 344.9)
- CMYK
- cmyk(0% 19% 9% 27%)
ティント · シェード · トーン
ティント
- C1A1B1
- C8ABBA
- CFB5C2
- D6C0CB
- DDCAD3
- E3D4DC
- EADFE5
- F1EAED
- F8F4F6
シェード
- A18392
- 896F7C
- 725C67
- 5C4953
- 46373F
- 32262C
- 1E171B
- 0D080A
- 020101
トーン
- B495A5
- AE92A1
- A9909D
- A38E98
- 9D8C94
- 978990
- 91878C
- 8C8588
- 868284
カラーハーモニー
補色 +180°
- BA97A9
Violet Fantasy
- 87AD9C
≈ Corsican
類似色 -30° +30°
- BA97A9
Violet Fantasy
- AF9AB7
≈ Purple Springs
- BF9798
≈ Mutabilis
トライアド +120° +240°
- BA97A9
Violet Fantasy
- A6A582
≈ Dark Envy
- 83A9BA
≈ Summerhouse Blue
スプリットコンプリメンタリー +150° +210°
- BA97A9
Violet Fantasy
- 95AA8C
≈ Zucchini Cream
- 7FADAC
≈ Galaxy Green
テトラード +90° +180° +270°
- BA97A9
Violet Fantasy
- B49F81
≈ Silestone
- 87AD9C
≈ Corsican
- 8FA4C1
≈ Frills
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.59:1 · APCA Lc 51
Ag
AAA黒の上
WCAG 8.08:1 · APCA Lc 51
最適な文字色: #000000
WCAG 8.08:1 (AAA) · APCA Lc 51
Contrast pairs
コードスニペット
CSS
:root {
--violet-fantasy: #ba97a9;
--violet-fantasy-rgb: 186 151 169;
--violet-fantasy-oklch: oklch(0.714 0.048 346.1);
}
.element {
color: var(--violet-fantasy);
background-color: hsl(329 20% 66%);
border-color: oklch(0.714 0.048 346.1);
}Tailwind CSS v4
@theme {
--color-violet-fantasy: #ba97a9;
--color-violet-fantasy-50: #fff0f7;
--color-violet-fantasy-100: #f5e2eb;
--color-violet-fantasy-200: #e5ccd8;
--color-violet-fantasy-300: #cbaebc;
--color-violet-fantasy-400: #b593a4;
--color-violet-fantasy-500: #9f7a8d;
--color-violet-fantasy-600: #866777;
--color-violet-fantasy-700: #6b525f;
--color-violet-fantasy-800: #4f3c46;
--color-violet-fantasy-900: #372931;
--color-violet-fantasy-950: #22171d;
}SCSS
$violet-fantasy: #ba97a9;
$violet-fantasy-rgb: 186, 151, 169;
$violet-fantasy-light: mix(#fff, $violet-fantasy, 20%);
$violet-fantasy-dark: mix(#000, $violet-fantasy, 20%);
.element {
color: $violet-fantasy;
box-shadow: 0 0 0 2px rgba($violet-fantasy, 0.35);
}