Nazwany kolor · #F3C1A3
Neighbourly Peach
Neighbourly Peach to #F3C1A3: rgb(243 193 163), hsl(23 77% 80%), oklch(0.848 0.07 52.4). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Orange mean? → · Neighbourly Peach color name →
#F3C1A3
oklch(0.848 0.07 52.4)
Konwersje koloru
- HEX
- #f3c1a3
- RGB
- rgb(243 193 163)
- HSL
- hsl(23 77% 80%)
- HWB
- hwb(23 64% 5%)
- OKLCH
- oklch(0.848 0.07 52.4)
- OKLab
- oklab(0.848 0.043 0.056)
- CIE Lab
- lab(82.05 15.46 22.33)
- LCH
- lch(82.05 27.16 55.3)
- CMYK
- cmyk(0% 21% 33% 5%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- F5C7AC
- F6CDB5
- F7D4BF
- F9DAC8
- FAE0D1
- FBE6DA
- FCECE3
- FDF3EC
- FEF9F6
Odcienie ciemniejsze
- D3A78D
- B48F78
- 977763
- 7A5F4F
- 5E493C
- 44342A
- 2B2019
- 140E0A
- 030201
Tony
- E7BAA0
- DBB49C
- D0AD99
- C4A795
- B8A092
- AD9A8E
- A2938B
- 968D87
- 8B8684
Harmonie kolorów
Komplementarna +180°
- F3C1A3
Neighbourly Peach
- 9FD6F4
≈ Juzcar Blue
Analogowa -30° +30°
- F3C1A3
Neighbourly Peach
- F8BCB8
≈ Peach Whisper
- E4C999
≈ Frozen Fruit
Triada +120° +240°
- F3C1A3
Neighbourly Peach
- 9DDDC8
≈ Tropical Freeze
- CEC5F8
≈ Innocent Snowdrop
Komplementarna rozszczepiona +150° +210°
- F3C1A3
Neighbourly Peach
- 95DBE1
≈ Exotic Escape
- B5CEFC
≈ Ice Cold Stare
Tetrada +90° +180° +270°
- F3C1A3
Neighbourly Peach
- B3D9AF
≈ Bleached Spruce
- 9FD6F4
≈ Juzcar Blue
- E4BEE9
≈ Beefy Pink
Kontrast i dostępność
Ag
FailNa bieli
WCAG 1.61:1 · APCA Lc 28
Ag
AAANa czerni
WCAG 12.96:1 · APCA Lc 75
Najlepszy kolor tekstu: #000000
WCAG 12.96:1 (AAA) · APCA Lc 75
Contrast pairs
Fragmenty kodu
CSS
:root {
--neighbourly-peach: #f3c1a3;
--neighbourly-peach-rgb: 243 193 163;
--neighbourly-peach-oklch: oklch(0.848 0.07 52.4);
}
.element {
color: var(--neighbourly-peach);
background-color: hsl(23 77% 80%);
border-color: oklch(0.848 0.07 52.4);
}Tailwind CSS v4
@theme {
--color-neighbourly-peach: #f3c1a3;
--color-neighbourly-peach-50: #fff0e3;
--color-neighbourly-peach-100: #fce2d2;
--color-neighbourly-peach-200: #edcdb8;
--color-neighbourly-peach-300: #d5ae96;
--color-neighbourly-peach-400: #c09378;
--color-neighbourly-peach-500: #ac795a;
--color-neighbourly-peach-600: #91674d;
--color-neighbourly-peach-700: #74523d;
--color-neighbourly-peach-800: #563b2c;
--color-neighbourly-peach-900: #3c291e;
--color-neighbourly-peach-950: #26160e;
}SCSS
$neighbourly-peach: #f3c1a3;
$neighbourly-peach-rgb: 243, 193, 163;
$neighbourly-peach-light: mix(#fff, $neighbourly-peach, 20%);
$neighbourly-peach-dark: mix(#000, $neighbourly-peach, 20%);
.element {
color: $neighbourly-peach;
box-shadow: 0 0 0 2px rgba($neighbourly-peach, 0.35);
}