Màu có tên · #F5A2A1
Candy Heart Pink
Candy Heart Pink là #F5A2A1: rgb(245 162 161), hsl(1 81% 80%), oklch(0.794 0.099 20.3). Xem sắc nhạt, sắc đậm, hòa sắc, tương phản WCAG và APCA, cùng mã CSS, Tailwind v4 và SCSS.
What does Red mean? → · Candy Heart Pink color name →
#F5A2A1
oklch(0.794 0.099 20.3)
Chuyển đổi màu
- 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%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- F7ABAA
- F9B5B3
- FABEBD
- FBC7C6
- FDD1CF
- FDDAD9
- FEE3E2
- FFECEC
- FFF6F5
Sắc đậm
- D58C8B
- B67776
- 986362
- 7B4F4E
- 5F3C3C
- 442A2A
- 2B1919
- 150A09
- 030101
Sắc xám
- E99F9E
- DE9C9A
- D29897
- C69594
- BB9291
- AF8E8D
- A38B8A
- 988787
- 8C8483
Hòa sắc
Bổ túc +180°
- F5A2A1
Candy Heart Pink
- 63CFD5
≈ Throat Chakra
Tương đồng -30° +30°
- F5A2A1
Candy Heart Pink
- EDA1C4
≈ Prism Pink
- F0A981
≈ Orange Liqueur
Bộ ba +120° +240°
- F5A2A1
Candy Heart Pink
- 99CC8F
≈ Kettle Drum
- 97BDFC
≈ Truesky Gloxym
Bổ túc chia +150° +210°
- F5A2A1
Candy Heart Pink
- 75D1B2
≈ Sea Treasure
- 74C8EF
≈ Spritzig
Bộ bốn +90° +180° +270°
- F5A2A1
Candy Heart Pink
- BFC275
≈ Mélange Green
- 63CFD5
≈ Throat Chakra
- BBB1F7
≈ Purple Sand
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 1.98:1 · APCA Lc 38
Ag
AAATrên nền đen
WCAG 10.56:1 · APCA Lc 64
Màu chữ tốt nhất: #000000
WCAG 10.56:1 (AAA) · APCA Lc 64
Contrast pairs
Đoạn mã
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);
}