Nazwany kolor · #F3BAC9
Pink Grapefruit
Pink Grapefruit to #F3BAC9: rgb(243 186 201), hsl(344 70% 84%), oklch(0.845 0.068 1.2). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Pink mean? → · Pink Grapefruit color name →
#F3BAC9
oklch(0.845 0.068 1.2)
Konwersje koloru
- 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%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5C1CE
- F6C8D4
- F8CFD9
- F9D6DE
- FADCE4
- FBE3E9
- FCEAEF
- FDF1F4
- FEF8F9
Odcienie ciemniejsze
- D3A1AE
- B48995
- 97727C
- 7A5C64
- 5E464C
- 443236
- 2B1E22
- 140D0F
- 030202
Tony
- E7B4C1
- DBAEBA
- D0A8B2
- C4A3AB
- B99DA4
- AD979C
- A29195
- 968B8E
- 8B8687
Harmonie kolorów
Komplementarna +180°
- F3BAC9
Pink Grapefruit
- 9ADBCF
≈ Land Ahoy!
Analogowa -30° +30°
- F3BAC9
Pink Grapefruit
- E7BCE1
≈ Blackberry Yoghurt
- F5BCB1
≈ Dainty Debutante
Triada +120° +240°
- F3BAC9
Pink Grapefruit
- C5D3A2
≈ Cricket Field
- A5D2F5
≈ Light Shimmer
Komplementarna rozszczepiona +150° +210°
- F3BAC9
Pink Grapefruit
- ACD9B6
≈ Shanghai Jade
- 97D9E6
≈ Cool Water Lake
Tetrada +90° +180° +270°
- F3BAC9
Pink Grapefruit
- DCCB99
≈ Desert Temple
- 9ADBCF
≈ Land Ahoy!
- BBCAFA
≈ Light Periwinkle
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.65:1 · APCA Lc 29
Ag
AAANa czerni
WCAG 12.67:1 · APCA Lc 74
Najlepszy kolor tekstu: #000000
WCAG 12.67:1 (AAA) · APCA Lc 74
Contrast pairs
Fragmenty kodu
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);
}