色名 · #A328B3
Pink Spyro
Pink Spyroは#A328B3：rgb(163 40 179)、hsl(293 63% 43%)、oklch(0.53 0.219 322.8)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Pink Spyro color name →
#A328B3
oklch(0.53 0.219 322.8)
カラー変換
- HEX
- #a328b3
- RGB
- rgb(163 40 179)
- HSL
- hsl(293 63% 43%)
- HWB
- hwb(293 16% 30%)
- OKLCH
- oklch(0.53 0.219 322.8)
- OKLab
- oklab(0.53 0.175 -0.133)
- CIE Lab
- lab(41.85 61.8 -47.48)
- LCH
- lch(41.85 77.93 322.5)
- CMYK
- cmyk(9% 78% 0% 30%)
ティント · シェード · トーン
ティント
- AD45BB
- B85CC4
- C172CC
- CB87D4
- D49BDB
- DDAFE3
- E6C3EA
- EFD7F1
- F7EBF8
シェード
- 8D219B
- 781B84
- 63156E
- 4F0F58
- 3C0943
- 2A042F
- 19021D
- 0A010C
- 010001
トーン
- A037AE
- 9E43AA
- 9B4EA5
- 9856A0
- 945F9B
- 916696
- 8D6D91
- 89748C
- 857A86
カラーハーモニー
補色 +180°
- A328B3
Pink Spyro
- 008306
≈ Lucky Clover
類似色 -30° +30°
- A328B3
Pink Spyro
- 7642DC
≈ Aconite Purple
- C00077
≈ Purple Anxiety
トライアド +120° +240°
- A328B3
Pink Spyro
- 8A6500
≈ Alligator
- 007B83
≈ Mediterranean Cove
スプリットコンプリメンタリー +150° +210°
- A328B3
Pink Spyro
- 6D7200
≈ Spinach Soup
- 007E66
≈ Generic Viridian
テトラード +90° +180° +270°
- A328B3
Pink Spyro
- A65100
≈ Windsor Brown
- 008306
≈ Lucky Clover
- 0075A0
≈ Mitchell Blue
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 5.97:1 · APCA Lc 79
Ag
Fail黒の上
WCAG 3.51:1 · APCA Lc 23
最適な文字色: #FFFFFF
WCAG 5.97:1 (AA) · APCA Lc 79
Contrast pairs
コードスニペット
CSS
:root {
--pink-spyro: #a328b3;
--pink-spyro-rgb: 163 40 179;
--pink-spyro-oklch: oklch(0.53 0.219 322.8);
}
.element {
color: var(--pink-spyro);
background-color: hsl(293 63% 43%);
border-color: oklch(0.53 0.219 322.8);
}Tailwind CSS v4
@theme {
--color-pink-spyro: #a328b3;
--color-pink-spyro-50: #ffe0ff;
--color-pink-spyro-100: #ffcfff;
--color-pink-spyro-200: #ffb3ff;
--color-pink-spyro-300: #ee8cf5;
--color-pink-spyro-400: #d969e8;
--color-pink-spyro-500: #c63ed8;
--color-pink-spyro-600: #a736b6;
--color-pink-spyro-700: #862c92;
--color-pink-spyro-800: #621f6f;
--color-pink-spyro-900: #45144e;
--color-pink-spyro-950: #2d0534;
}SCSS
$pink-spyro: #a328b3;
$pink-spyro-rgb: 163, 40, 179;
$pink-spyro-light: mix(#fff, $pink-spyro, 20%);
$pink-spyro-dark: mix(#000, $pink-spyro, 20%);
.element {
color: $pink-spyro;
box-shadow: 0 0 0 2px rgba($pink-spyro, 0.35);
}