이름 색상 · #F3BAC9
Pink Grapefruit
Pink Grapefruit은(는) #F3BAC9: rgb(243 186 201), hsl(344 70% 84%), oklch(0.845 0.068 1.2). 틴트, 셰이드, 색 조화, WCAG·APCA 대비, CSS·Tailwind v4·SCSS 코드를 확인하세요.
What does Pink mean? → · Pink Grapefruit color name →
#F3BAC9
oklch(0.845 0.068 1.2)
색상 변환
- HEX
- #f3bac9
- RGB
- rgb(243 186 201)
- HSL
- hsl(344 70% 84%)
- HWB
- hwb(344 73% 5%)
- OKLCH
- oklch(0.845 0.068 1.2)
- OKLab
- oklab(0.845 0.068 0.001)
- CIE Lab
- lab(81.12 22.81 0.81)
- LCH
- lch(81.12 22.83 2)
- CMYK
- cmyk(0% 23% 17% 5%)
틴트 · 셰이드 · 톤
틴트
- F5C1CE
- F6C8D4
- F8CFD9
- F9D6DE
- FADCE4
- FBE3E9
- FCEAEF
- FDF1F4
- FEF8F9
셰이드
- D3A1AE
- B48995
- 97727C
- 7A5C64
- 5E464C
- 443236
- 2B1E22
- 140D0F
- 030202
톤
- E7B4C1
- DBAEBA
- D0A8B2
- C4A3AB
- B99DA4
- AD979C
- A29195
- 968B8E
- 8B8687
색 조화
보색 +180°
- F3BAC9
Pink Grapefruit
- 9ADBCF
≈ Land Ahoy!
유사색 -30° +30°
- F3BAC9
Pink Grapefruit
- E7BCE1
≈ Blackberry Yoghurt
- F5BCB1
≈ Dainty Debutante
삼각 배색 +120° +240°
- F3BAC9
Pink Grapefruit
- C5D3A2
≈ Cricket Field
- A5D2F5
≈ Light Shimmer
분열 보색 +150° +210°
- F3BAC9
Pink Grapefruit
- ACD9B6
≈ Shanghai Jade
- 97D9E6
≈ Cool Water Lake
사각 배색 +90° +180° +270°
- F3BAC9
Pink Grapefruit
- DCCB99
≈ Desert Temple
- 9ADBCF
≈ Land Ahoy!
- BBCAFA
≈ Light Periwinkle
대비 및 접근성
Ag
Fail흰색 위
WCAG 1.65:1 · APCA Lc 29
Ag
AAA검은색 위
WCAG 12.67:1 · APCA Lc 74
가장 좋은 글자색: #000000
WCAG 12.67:1 (AAA) · APCA Lc 74
Contrast pairs
코드 스니펫
CSS
:root {
--pink-grapefruit: #f3bac9;
--pink-grapefruit-rgb: 243 186 201;
--pink-grapefruit-oklch: oklch(0.845 0.068 1.2);
}
.element {
color: var(--pink-grapefruit);
background-color: hsl(344 70% 84%);
border-color: oklch(0.845 0.068 1.2);
}Tailwind CSS v4
@theme {
--color-pink-grapefruit: #f3bac9;
--color-pink-grapefruit-50: #ffeef3;
--color-pink-grapefruit-100: #fddfe5;
--color-pink-grapefruit-200: #efc9d1;
--color-pink-grapefruit-300: #d7a9b4;
--color-pink-grapefruit-400: #c18e9c;
--color-pink-grapefruit-500: #ac7383;
--color-pink-grapefruit-600: #92626f;
--color-pink-grapefruit-700: #754e59;
--color-pink-grapefruit-800: #563842;
--color-pink-grapefruit-900: #3c272d;
--color-pink-grapefruit-950: #26151a;
}SCSS
$pink-grapefruit: #f3bac9;
$pink-grapefruit-rgb: 243, 186, 201;
$pink-grapefruit-light: mix(#fff, $pink-grapefruit, 20%);
$pink-grapefruit-dark: mix(#000, $pink-grapefruit, 20%);
.element {
color: $pink-grapefruit;
box-shadow: 0 0 0 2px rgba($pink-grapefruit, 0.35);
}