色名 · #FF7A8F
Magical Girl
Magical Girlは#FF7A8F：rgb(255 122 143)、hsl(351 100% 74%)、oklch(0.739 0.162 12.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Magical Girl color name →
#FF7A8F
oklch(0.739 0.162 12.1)
カラー変換
- HEX
- #ff7a8f
- RGB
- rgb(255 122 143)
- HSL
- hsl(351 100% 74%)
- HWB
- hwb(351 48% 0%)
- OKLCH
- oklch(0.739 0.162 12.1)
- OKLab
- oklab(0.739 0.159 0.034)
- CIE Lab
- lab(67.92 53 14.24)
- LCH
- lch(67.92 54.88 15)
- CMYK
- cmyk(0% 52% 44% 0%)
ティント · シェード · トーン
ティント
- FF899A
- FF96A5
- FFA4B0
- FFB1BB
- FFBFC6
- FFCCD1
- FFD9DC
- FFE5E8
- FFF2F3
シェード
- DE697C
- BE5969
- 9E4957
- 803A45
- 632B34
- 481D24
- 2E1015
- 160507
- 030101
トーン
- F37C8E
- E77D8C
- DA7F8B
- CE8089
- C18088
- B58186
- A88185
- 9B8183
- 8E8182
カラーハーモニー
補色 +180°
- FF7A8F
Magical Girl
- 00C3BF
≈ Cala Benirrás Blue
類似色 -30° +30°
- FF7A8F
Magical Girl
- EE7DC7
≈ Persian Pink
- FD8351
≈ Poached Rainbow Trout
トライアド +120° +240°
- FF7A8F
Magical Girl
- 83BF49
≈ Conceptual
- 65AFFF
≈ Tiān Lán Sky
スプリットコンプリメンタリー +150° +210°
- FF7A8F
Magical Girl
- 00C98B
≈ Retro Lime
- 00BDE8
≈ Blue Raspberry
テトラード +90° +180° +270°
- FF7A8F
Magical Girl
- BFAD00
≈ Muddy Yellow
- 00C3BF
≈ Cala Benirrás Blue
- 9E9EFF
≈ Cobalite
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 2.49:1 · APCA Lc 48
Ag
AAA黒の上
WCAG 8.43:1 · APCA Lc 54
最適な文字色: #000000
WCAG 8.43:1 (AAA) · APCA Lc 54
Contrast pairs
コードスニペット
CSS
:root {
--magical-girl: #ff7a8f;
--magical-girl-rgb: 255 122 143;
--magical-girl-oklch: oklch(0.739 0.162 12.1);
}
.element {
color: var(--magical-girl);
background-color: hsl(351 100% 74%);
border-color: oklch(0.739 0.162 12.1);
}Tailwind CSS v4
@theme {
--color-magical-girl: #ff7a8f;
--color-magical-girl-50: #ffe3e7;
--color-magical-girl-100: #ffd2d7;
--color-magical-girl-200: #ffb8bf;
--color-magical-girl-300: #ff939e;
--color-magical-girl-400: #ed7185;
--color-magical-girl-500: #db4c69;
--color-magical-girl-600: #b94259;
--color-magical-girl-700: #953447;
--color-magical-girl-800: #6f2535;
--color-magical-girl-900: #4e1924;
--color-magical-girl-950: #330813;
}SCSS
$magical-girl: #ff7a8f;
$magical-girl-rgb: 255, 122, 143;
$magical-girl-light: mix(#fff, $magical-girl, 20%);
$magical-girl-dark: mix(#000, $magical-girl, 20%);
.element {
color: $magical-girl;
box-shadow: 0 0 0 2px rgba($magical-girl, 0.35);
}