色名 · #F5A2A1
Candy Heart Pink
Candy Heart Pinkは#F5A2A1：rgb(245 162 161)、hsl(1 81% 80%)、oklch(0.794 0.099 20.3)。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。
What does Red mean? → · Candy Heart Pink color name →
#F5A2A1
oklch(0.794 0.099 20.3)
カラー変換
- HEX
- #f5a2a1
- RGB
- rgb(245 162 161)
- HSL
- hsl(1 81% 80%)
- HWB
- hwb(1 63% 4%)
- OKLCH
- oklch(0.794 0.099 20.3)
- OKLab
- oklab(0.794 0.093 0.034)
- CIE Lab
- lab(75.06 31.56 13.89)
- LCH
- lch(75.06 34.48 23.8)
- CMYK
- cmyk(0% 34% 34% 4%)
ティント · シェード · トーン
ティント
- F7ABAA
- F9B5B3
- FABEBD
- FBC7C6
- FDD1CF
- FDDAD9
- FEE3E2
- FFECEC
- FFF6F5
シェード
- D58C8B
- B67776
- 986362
- 7B4F4E
- 5F3C3C
- 442A2A
- 2B1919
- 150A09
- 030101
トーン
- E99F9E
- DE9C9A
- D29897
- C69594
- BB9291
- AF8E8D
- A38B8A
- 988787
- 8C8483
カラーハーモニー
補色 +180°
- F5A2A1
Candy Heart Pink
- 63CFD5
≈ Throat Chakra
類似色 -30° +30°
- F5A2A1
Candy Heart Pink
- EDA1C4
≈ Prism Pink
- F0A981
≈ Orange Liqueur
トライアド +120° +240°
- F5A2A1
Candy Heart Pink
- 99CC8F
≈ Kettle Drum
- 97BDFC
≈ Truesky Gloxym
スプリットコンプリメンタリー +150° +210°
- F5A2A1
Candy Heart Pink
- 75D1B2
≈ Sea Treasure
- 74C8EF
≈ Spritzig
テトラード +90° +180° +270°
- F5A2A1
Candy Heart Pink
- BFC275
≈ Mélange Green
- 63CFD5
≈ Throat Chakra
- BBB1F7
≈ Purple Sand
コントラストとアクセシビリティ
Ag
Fail白の上
WCAG 1.98:1 · APCA Lc 38
Ag
AAA黒の上
WCAG 10.56:1 · APCA Lc 64
最適な文字色: #000000
WCAG 10.56:1 (AAA) · APCA Lc 64
Contrast pairs
コードスニペット
CSS
:root {
--candy-heart-pink: #f5a2a1;
--candy-heart-pink-rgb: 245 162 161;
--candy-heart-pink-oklch: oklch(0.794 0.099 20.3);
}
.element {
color: var(--candy-heart-pink);
background-color: hsl(1 81% 80%);
border-color: oklch(0.794 0.099 20.3);
}Tailwind CSS v4
@theme {
--color-candy-heart-pink: #f5a2a1;
--color-candy-heart-pink-50: #ffebe8;
--color-candy-heart-pink-100: #ffdcd9;
--color-candy-heart-pink-200: #fcc4c1;
--color-candy-heart-pink-300: #e6a4a0;
--color-candy-heart-pink-400: #d38686;
--color-candy-heart-pink-500: #bf6a6a;
--color-candy-heart-pink-600: #a15a5a;
--color-candy-heart-pink-700: #824848;
--color-candy-heart-pink-800: #603335;
--color-candy-heart-pink-900: #432324;
--color-candy-heart-pink-950: #2b1213;
}SCSS
$candy-heart-pink: #f5a2a1;
$candy-heart-pink-rgb: 245, 162, 161;
$candy-heart-pink-light: mix(#fff, $candy-heart-pink, 20%);
$candy-heart-pink-dark: mix(#000, $candy-heart-pink, 20%);
.element {
color: $candy-heart-pink;
box-shadow: 0 0 0 2px rgba($candy-heart-pink, 0.35);
}