色名 · #FF1476
Pink Ink
Pink Inkは#FF1476：rgb(255 20 118)、hsl(335 100% 54%)、oklch(0.646 0.253 6.1)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Pink Ink color name →
#FF1476
oklch(0.646 0.253 6.1)
カラー変換
- HEX
- #ff1476
- RGB
- rgb(255 20 118)
- HSL
- hsl(335 100% 54%)
- HWB
- hwb(335 8% 0%)
- OKLCH
- oklch(0.646 0.253 6.1)
- OKLab
- oklab(0.646 0.252 0.027)
- CIE Lab
- lab(55.94 81.93 12.27)
- LCH
- lch(55.94 82.84 8.5)
- CMYK
- cmyk(0% 92% 54% 0%)
ティント · シェード · トーン
ティント
- FF4483
- FF6090
- FF789D
- FF8DAB
- FFA1B8
- FFB5C6
- FFC8D4
- FFDAE2
- FFEDF1
シェード
- DE1066
- BE0C56
- 9E0847
- 800538
- 630329
- 48011C
- 2E010F
- 160005
- 030001
トーン
- F43377
- E94478
- DD5179
- D15B7A
- C5637B
- B96B7C
- AC717D
- 9E777E
- 907C7F
カラーハーモニー
補色 +180°
- FF1476
Pink Ink
- 00A498
≈ Tyrolite Blue-Green
類似色 -30° +30°
- FF1476
Pink Ink
- E433C7
≈ Kriss Me Not Fuchsia
- F64600
≈ Reddish Orange
トライアド +120° +240°
- FF1476
Pink Ink
- 759F00
≈ Luminescent Green
- 0094EC
≈ Pervenche
スプリットコンプリメンタリー +150° +210°
- FF1476
Pink Ink
- 00A964
≈ Greedo Green
- 009FBB
≈ Greek Blue
テトラード +90° +180° +270°
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 3.74:1 · APCA Lc 63
Ag
AA黒の上
WCAG 5.61:1 · APCA Lc 39
最適な文字色: #000000
WCAG 5.61:1 (AA) · APCA Lc 39
Contrast pairs
コードスニペット
CSS
:root {
--pink-ink: #ff1476;
--pink-ink-rgb: 255 20 118;
--pink-ink-oklch: oklch(0.646 0.253 6.1);
}
.element {
color: var(--pink-ink);
background-color: hsl(335 100% 54%);
border-color: oklch(0.646 0.253 6.1);
}Tailwind CSS v4
@theme {
--color-pink-ink: #ff1476;
--color-pink-ink-50: #ffd7e7;
--color-pink-ink-100: #ffc4d8;
--color-pink-ink-200: #ffa3bf;
--color-pink-ink-300: #ff759e;
--color-pink-ink-400: #ff4287;
--color-pink-ink-500: #fe006c;
--color-pink-ink-600: #d7005c;
--color-pink-ink-700: #ad0049;
--color-pink-ink-800: #810038;
--color-pink-ink-900: #5b0026;
--color-pink-ink-950: #3d0015;
}SCSS
$pink-ink: #ff1476;
$pink-ink-rgb: 255, 20, 118;
$pink-ink-light: mix(#fff, $pink-ink, 20%);
$pink-ink-dark: mix(#000, $pink-ink, 20%);
.element {
color: $pink-ink;
box-shadow: 0 0 0 2px rgba($pink-ink, 0.35);
}