色名 · #AA11AA
Magentle
Magentleは#AA11AA：rgb(170 17 170)、hsl(300 82% 37%)、oklch(0.522 0.232 328.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Purple mean? → · Magentle color name →
#AA11AA
oklch(0.522 0.232 328.3)
カラー変換
- HEX
- #aa11aa
- RGB
- rgb(170 17 170)
- HSL
- hsl(300 82% 37%)
- HWB
- hwb(300 7% 33%)
- OKLCH
- oklch(0.522 0.232 328.3)
- OKLab
- oklab(0.522 0.197 -0.122)
- CIE Lab
- lab(40.87 67.17 -43.61)
- LCH
- lch(40.87 80.09 327)
- CMYK
- cmyk(0% 90% 0% 33%)
ティント · シェード · トーン
ティント
- B43AB3
- BE54BC
- C86BC5
- D181CE
- DA97D6
- E2ABDF
- EAC0E7
- F1D5EF
- F8EAF7
シェード
- 930D93
- 7D097D
- 680668
- 530453
- 3F023F
- 2D012D
- 1B001B
- 0B000B
- 010001
トーン
- A72BA6
- A43AA3
- A1479F
- 9D519B
- 995A97
- 956393
- 906B8E
- 8B728A
- 867985
カラーハーモニー
補色 +180°
- AA11AA
Magentle
- 008032
≈ Pharmaceutical Green
類似色 -30° +30°
- AA11AA
Magentle
- 7F35D9
≈ Hokkaido Lavender
- BF0068
≈ Aztec Warrior
トライアド +120° +240°
- AA11AA
Magentle
- 836500
≈ Alligator
- 007885
≈ Biscay Bay
スプリットコンプリメンタリー +150° +210°
- AA11AA
Magentle
- 647200
≈ Topiary Green
- 007B6A
≈ Ultramarine Green
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
AA白の上
WCAG 6.23:1 · APCA Lc 79
Ag
Fail黒の上
WCAG 3.36:1 · APCA Lc 23
最適な文字色: #FFFFFF
WCAG 6.23:1 (AA) · APCA Lc 79
Contrast pairs
コードスニペット
CSS
:root {
--magentle: #aa11aa;
--magentle-rgb: 170 17 170;
--magentle-oklch: oklch(0.522 0.232 328.3);
}
.element {
color: var(--magentle);
background-color: hsl(300 82% 37%);
border-color: oklch(0.522 0.232 328.3);
}Tailwind CSS v4
@theme {
--color-magentle: #aa11aa;
--color-magentle-50: #ffdeff;
--color-magentle-100: #ffccff;
--color-magentle-200: #ffaeff;
--color-magentle-300: #f887ee;
--color-magentle-400: #e460e1;
--color-magentle-500: #d12fd0;
--color-magentle-600: #b02bb0;
--color-magentle-700: #8e228d;
--color-magentle-800: #68186c;
--color-magentle-900: #49104c;
--color-magentle-950: #300132;
}SCSS
$magentle: #aa11aa;
$magentle-rgb: 170, 17, 170;
$magentle-light: mix(#fff, $magentle, 20%);
$magentle-dark: mix(#000, $magentle, 20%);
.element {
color: $magentle;
box-shadow: 0 0 0 2px rgba($magentle, 0.35);
}