Named color · #1FB57A
April Fool’s Red
April Fool’s Red is #1FB57A: rgb(31 181 122), hsl(156 71% 42%), oklch(0.685 0.148 160.2). See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
What does Green mean? → · April Fool’s Red color name →
#1FB57A
oklch(0.685 0.148 160.2)
Color conversions
- HEX
- #1fb57a
- RGB
- rgb(31 181 122)
- HSL
- hsl(156 71% 42%)
- HWB
- hwb(156 12% 29%)
- OKLCH
- oklch(0.685 0.148 160.2)
- OKLab
- oklab(0.685 -0.139 0.05)
- CIE Lab
- lab(65.44 -49.38 19.13)
- LCH
- lch(65.44 52.96 158.8)
- CMYK
- cmyk(83% 0% 33% 29%)
Tints · Shades · Tones
Tints
- 47BD87
- 62C494
- 78CCA1
- 8DD3AE
- A1DBBB
- B5E2C9
- C8E9D6
- DAF1E4
- EDF8F1
Shades
- 199D69
- 148659
- 0F6F49
- 0A593A
- 06442B
- 03301D
- 011D10
- 000C05
- 000201
Tones
- 37B07B
- 46AB7C
- 52A67C
- 5CA07D
- 649B7E
- 6B967E
- 71907F
- 778B7F
- 7B8680
Color harmonies
Complementary +180°
- 1FB57A
April Fool’s Red
- D572B6
≈ Sky Magenta
Analogous -30° +30°
- 1FB57A
April Fool’s Red
- 7BAB40
≈ Parakeet
- 00B1AA
≈ Glass Jar Blue
Triadic +120° +240°
- 1FB57A
April Fool’s Red
- 8A8DF3
≈ Lavender Blue Shadow
- E4764E
≈ Koeksister
Split-complementary +150° +210°
- 1FB57A
April Fool’s Red
- B67EDD
≈ Lavender Blossom
- E56F85
≈ Deep Blush
Tetradic +90° +180° +270°
- 1FB57A
April Fool’s Red
- 499EF1
≈ Rockman Blue
- D572B6
≈ Sky Magenta
- D38704
≈ Copious Caramel
Contrast & accessibility
Ag
FailOn white
WCAG 2.64:1 · APCA Lc 51
Ag
AAAOn black
WCAG 7.94:1 · APCA Lc 51
Best text color: #000000
WCAG 7.94:1 (AAA) · APCA Lc 51
Contrast pairs
Code snippets
CSS
:root {
--april-fool-s-red: #1fb57a;
--april-fool-s-red-rgb: 31 181 122;
--april-fool-s-red-oklch: oklch(0.685 0.148 160.2);
}
.element {
color: var(--april-fool-s-red);
background-color: hsl(156 71% 42%);
border-color: oklch(0.685 0.148 160.2);
}Tailwind CSS v4
@theme {
--color-april-fool-s-red: #1fb57a;
--color-april-fool-s-red-50: #d0ffe9;
--color-april-fool-s-red-100: #bcf8d9;
--color-april-fool-s-red-200: #99e8c1;
--color-april-fool-s-red-300: #69cfa0;
--color-april-fool-s-red-400: #36b980;
--color-april-fool-s-red-500: #00a263;
--color-april-fool-s-red-600: #008954;
--color-april-fool-s-red-700: #006e43;
--color-april-fool-s-red-800: #00512e;
--color-april-fool-s-red-900: #00381f;
--color-april-fool-s-red-950: #00230f;
}SCSS
$april-fool-s-red: #1fb57a;
$april-fool-s-red-rgb: 31, 181, 122;
$april-fool-s-red-light: mix(#fff, $april-fool-s-red, 20%);
$april-fool-s-red-dark: mix(#000, $april-fool-s-red, 20%);
.element {
color: $april-fool-s-red;
box-shadow: 0 0 0 2px rgba($april-fool-s-red, 0.35);
}