色名 · #F62681
Pink Piano
Pink Pianoは#F62681：rgb(246 38 129)、hsl(334 92% 56%)、oklch(0.64 0.241 1.9)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Pink Piano color name →
#F62681
oklch(0.64 0.241 1.9)
カラー変換
- HEX
- #f62681
- RGB
- rgb(246 38 129)
- HSL
- hsl(334 92% 56%)
- HWB
- hwb(334 15% 4%)
- OKLCH
- oklch(0.64 0.241 1.9)
- OKLab
- oklab(0.64 0.241 0.008)
- CIE Lab
- lab(55.3 77.81 4.47)
- LCH
- lch(55.3 77.94 3.3)
- CMYK
- cmyk(0% 85% 48% 4%)
ティント · シェード · トーン
ティント
- FA4A8D
- FE6499
- FF7AA5
- FF8FB2
- FFA2BE
- FFB5CB
- FFC8D8
- FFDBE5
- FFEDF2
シェード
- D6206F
- B7195E
- 98134E
- 7B0D3E
- 5F082E
- 45041F
- 2C0212
- 150106
- 030001
トーン
- EC3B81
- E14981
- D75481
- CC5D81
- C06581
- B56C80
- A97280
- 9C7780
- 8F7C80
カラーハーモニー
補色 +180°
- F62681
Pink Piano
- 00A391
≈ Turquish
類似色 -30° +30°
- F62681
Pink Piano
- D93ECB
≈ Leo Royal Fuchsia
- FD2F05
≈ Ferrari Red
トライアド +120° +240°
- F62681
Pink Piano
- 7D9A00
≈ Green Thumb
- 0095DF
≈ Atmosphere
スプリットコンプリメンタリー +150° +210°
- F62681
Pink Piano
- 00A855
≈ Rita Repulsa
- 009EB3
≈ Lake Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.80:1 · APCA Lc 64
Ag
AA黒の上
WCAG 5.51:1 · APCA Lc 38
最適な文字色: #000000
WCAG 5.51:1 (AA) · APCA Lc 38
Contrast pairs
コードスニペット
CSS
:root {
--pink-piano: #f62681;
--pink-piano-rgb: 246 38 129;
--pink-piano-oklch: oklch(0.64 0.241 1.9);
}
.element {
color: var(--pink-piano);
background-color: hsl(334 92% 56%);
border-color: oklch(0.64 0.241 1.9);
}Tailwind CSS v4
@theme {
--color-pink-piano: #f62681;
--color-pink-piano-50: #ffd9ed;
--color-pink-piano-100: #ffc6df;
--color-pink-piano-200: #ffa6c8;
--color-pink-piano-300: #ff7aa9;
--color-pink-piano-400: #ff4b93;
--color-pink-piano-500: #f7007a;
--color-pink-piano-600: #d00067;
--color-pink-piano-700: #a80052;
--color-pink-piano-800: #7d003f;
--color-pink-piano-900: #58012b;
--color-pink-piano-950: #3b0019;
}SCSS
$pink-piano: #f62681;
$pink-piano-rgb: 246, 38, 129;
$pink-piano-light: mix(#fff, $pink-piano, 20%);
$pink-piano-dark: mix(#000, $pink-piano, 20%);
.element {
color: $pink-piano;
box-shadow: 0 0 0 2px rgba($pink-piano, 0.35);
}