Najbliższy nazwany kolor · #FD8E7B
#FD8E7B
Najbliższy nazwany kolor: Kissable
#FD8E7B (rgb(253 142 123), hsl(9 97% 74%), oklch(0.762 0.138 30.8)) jest najbliższy nazwanemu kolorowi Kissable. Zobacz odcienie, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
#FD8E7B
oklch(0.762 0.138 30.8)
Konwersje koloru
- HEX
- #fd8e7b
- RGB
- rgb(253 142 123)
- HSL
- hsl(9 97% 74%)
- HWB
- hwb(9 48% 1%)
- OKLCH
- oklch(0.762 0.138 30.8)
- OKLab
- oklab(0.762 0.119 0.071)
- CIE Lab
- lab(71.18 41.6 29.6)
- LCH
- lch(71.18 51.06 35.4)
- CMYK
- cmyk(0% 44% 51% 1%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- FF9A88
- FFA695
- FFB1A2
- FFBCAF
- FFC8BD
- FFD3CA
- FFDED7
- FFE9E4
- FFF4F2
Odcienie ciemniejsze
- DC7B6A
- BC685A
- 9D564A
- 7F443A
- 62342C
- 47241E
- 2D1510
- 160705
- 030101
Tony
- F18D7C
- E48D7D
- D88C7E
- CC8A7E
- C0897F
- B3887F
- A78680
- 9A8480
- 8D8280
Harmonie kolorów
Komplementarna +180°
- FD8E7B
Kissable
- 00C7E1
≈ Caribbean Blue
Analogowa -30° +30°
- FD8E7B
Kissable
- F88AAD
≈ Tickle Me Pink
- F09B4D
≈ Question Mark Block
Triada +120° +240°
- FD8E7B
Kissable
- 69CA83
≈ Spring Bouquet
- 95ADFF
≈ Widowmaker
Komplementarna rozszczepiona +150° +210°
- FD8E7B
Kissable
- 00CEB6
≈ Mint Leaf
- 56BCFF
≈ Hello Summer
Tetrada +90° +180° +270°
- FD8E7B
Kissable
- A5BF52
≈ Sapling
- 00C7E1
≈ Caribbean Blue
- C19CFC
≈ Baby Purple
Kontrast i dostępność
Ag
FailNa bieli
WCAG 2.25:1 · APCA Lc 44
Ag
AAANa czerni
WCAG 9.33:1 · APCA Lc 58
Najlepszy kolor tekstu: #000000
WCAG 9.33:1 (AAA) · APCA Lc 58
Contrast pairs
Fragmenty kodu
CSS
:root {
--kissable: #fd8e7b;
--kissable-rgb: 253 142 123;
--kissable-oklch: oklch(0.762 0.138 30.8);
}
.element {
color: var(--kissable);
background-color: hsl(9 97% 74%);
border-color: oklch(0.762 0.138 30.8);
}Tailwind CSS v4
@theme {
--color-kissable: #fd8e7b;
--color-kissable-50: #ffe8dc;
--color-kissable-100: #ffd8cb;
--color-kissable-200: #ffbfaf;
--color-kissable-300: #f59d8a;
--color-kissable-400: #e47d6b;
--color-kissable-500: #d25d4b;
--color-kissable-600: #b14f40;
--color-kissable-700: #8e3f33;
--color-kissable-800: #6a2d25;
--color-kissable-900: #4b1e19;
--color-kissable-950: #310d0a;
}SCSS
$kissable: #fd8e7b;
$kissable-rgb: 253, 142, 123;
$kissable-light: mix(#fff, $kissable, 20%);
$kissable-dark: mix(#000, $kissable, 20%);
.element {
color: $kissable;
box-shadow: 0 0 0 2px rgba($kissable, 0.35);
}