Màu có tên · #F19CBB
Amaranth Pink
Amaranth Pink là #F19CBB: rgb(241 156 187), hsl(338 75% 78%), oklch(0.786 0.108 356.4). 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? → · Amaranth Pink color name →
#F19CBB
oklch(0.786 0.108 356.4)
Chuyển đổi màu
- HEX
- #f19cbb
- RGB
- rgb(241 156 187)
- HSL
- hsl(338 75% 78%)
- HWB
- hwb(338 61% 5%)
- OKLCH
- oklch(0.786 0.108 356.4)
- OKLab
- oklab(0.786 0.108 -0.007)
- CIE Lab
- lab(73.81 35.59 -2.18)
- LCH
- lch(73.81 35.65 356.5)
- CMYK
- cmyk(0% 35% 22% 5%)
Sắc nhạt · Sắc đậm · Sắc xám
Sắc nhạt
- F3A6C2
- F5B0C8
- F7BACF
- F9C4D6
- FBCEDD
- FCD8E3
- FDE1EA
- FEEBF1
- FFF5F8
Sắc đậm
- D287A2
- B3738A
- 955F73
- 794C5C
- 5D3946
- 432832
- 2B181F
- 14090D
- 030102
Sắc xám
- E699B5
- DA97AF
- CF94A9
- C492A3
- B98F9D
- AD8C97
- A28991
- 97868B
- 8B8386
Hòa sắc
Bổ túc +180°
- F19CBB
Amaranth Pink
- 62D0B7
≈ Sweet Garden
Tương đồng -30° +30°
- F19CBB
Amaranth Pink
- DEA1DE
≈ Plum Juice
- F79E95
≈ Peach Amber
Bộ ba +120° +240°
- F19CBB
Amaranth Pink
- B5C270
≈ Avocado Cream
- 71C4F5
≈ Blue Mana
Bổ túc chia +150° +210°
- F19CBB
Amaranth Pink
- 8BCC90
≈ Good Luck Charm
- 55CDDC
≈ Watercourse
Bộ bốn +90° +180° +270°
- F19CBB
Amaranth Pink
- D8B564
≈ Strike It Rich
- 62D0B7
≈ Sweet Garden
- 9AB8FF
≈ Truesky Gloxym
Tương phản và khả năng tiếp cận
Ag
FailTrên nền trắng
WCAG 2.05:1 · APCA Lc 40
Ag
AAATrên nền đen
WCAG 10.21:1 · APCA Lc 62
Màu chữ tốt nhất: #000000
WCAG 10.21:1 (AAA) · APCA Lc 62
Contrast pairs
Đoạn mã
CSS
:root {
--amaranth-pink: #f19cbb;
--amaranth-pink-rgb: 241 156 187;
--amaranth-pink-oklch: oklch(0.786 0.108 356.4);
}
.element {
color: var(--amaranth-pink);
background-color: hsl(338 75% 78%);
border-color: oklch(0.786 0.108 356.4);
}Tailwind CSS v4
@theme {
--color-amaranth-pink: #f19cbb;
--color-amaranth-pink-50: #ffe9f5;
--color-amaranth-pink-100: #ffdae7;
--color-amaranth-pink-200: #fcc2d4;
--color-amaranth-pink-300: #e5a1b7;
--color-amaranth-pink-400: #d183a0;
--color-amaranth-pink-500: #bd6688;
--color-amaranth-pink-600: #a05773;
--color-amaranth-pink-700: #81455c;
--color-amaranth-pink-800: #5f3245;
--color-amaranth-pink-900: #43222f;
--color-amaranth-pink-950: #2b111c;
}SCSS
$amaranth-pink: #f19cbb;
$amaranth-pink-rgb: 241, 156, 187;
$amaranth-pink-light: mix(#fff, $amaranth-pink, 20%);
$amaranth-pink-dark: mix(#000, $amaranth-pink, 20%);
.element {
color: $amaranth-pink;
box-shadow: 0 0 0 2px rgba($amaranth-pink, 0.35);
}