uicolors.app Open in urlscan Pro
75.2.60.5  Public Scan

Form analysis
0 forms found in the DOM

Text Content

We're sorry but UI Colors doesn't work properly without JavaScript enabled.
Please enable it to continue.
UI
Colors
CreateEditBrowse Save
Save & Share

Copy this URL and store it as a comment in your Tailwind config or CSS file for
example or share it with others.
Copy URL
NEW
Figma Plugin Create color styles & guides easily.Try it out
Tailwind CSS
Color Generator

Press spacebar, enter a hexcode or change the
HSL values to create a custom color scale

Enter a hexcode to create a custom color scale

Random HEX
Cerise Red
Contrast gridExportEdit
50
fef2f4
100
fde6e9
200
fbd0d9
300
f7aab9
400
f27a93
500
e63f66
600
d42a5b
700
b21e4b
800
951c45
900
801b40
950
470a1f
Contrast grid

WCAG 2 APCA
Show all 4.5+ (AA) 7+ (AAA)

White50100200300400500600700800900950BlackWhite
1
1.1
1.2
1.4
1.8
2.6
4
4.9
6.6
8.3
9.8
15.8
21
50
1.1
1
1.1
1.3
1.7
2.4
3.6
4.5
6
7.6
8.9
14.4
19.2
100
1.2
1.1
1
1.2
1.5
2.2
3.4
4.1
5.6
7
8.2
13.3
17.7
200
1.4
1.3
1.2
1
1.3
1.9
2.9
3.5
4.8
6
7
11.4
15.1
300
1.8
1.7
1.5
1.3
1
1.4
2.2
2.7
3.6
4.5
5.3
8.6
11.4
400
2.6
2.4
2.2
1.9
1.4
1
1.5
1.9
2.5
3.2
3.7
6
8
500
4
3.6
3.4
2.9
2.2
1.5
1
1.2
1.7
2.1
2.5
4
5.3
600
4.9
4.5
4.1
3.5
2.7
1.9
1.2
1
1.3
1.7
2
3.2
4.3
700
6.6
6
5.6
4.8
3.6
2.5
1.7
1.3
1
1.3
1.5
2.4
3.2
800
8.3
7.6
7
6
4.5
3.2
2.1
1.7
1.3
1
1.2
1.9
2.5
900
9.8
8.9
8.2
7
5.3
3.7
2.5
2
1.5
1.2
1
1.6
2.1
950
15.8
14.4
13.3
11.4
8.6
6
4
3.2
2.4
1.9
1.6
1
1.3
Black
21
19.2
17.7
15.1
11.4
8
5.3
4.3
3.2
2.5
2.1
1.3
1

Export code

Tailwind (HEX)
Tailwind (OKLCH)
Tailwind (HSL)
SCSS (HEX)
CSS (HEX)
CSS (RGB)
SVG (Figma)
Copy code

'cerise-red': {
    '50': '#fef2f4',
    '100': '#fde6e9',
    '200': '#fbd0d9',
    '300': '#f7aab9',
    '400': '#f27a93',
    '500': '#e63f66',
    '600': '#d42a5b',
    '700': '#b21e4b',
    '800': '#951c45',
    '900': '#801b40',
    '950': '#470a1f',
},


'cerise-red': {
    '50': 'hsl(350, 86%, 97%)',
    '100': 'hsl(352, 85%, 95%)',
    '200': 'hsl(347, 84%, 90%)',
    '300': 'hsl(348, 83%, 82%)',
    '400': 'hsl(348, 82%, 71%)',
    '500': 'hsl(346, 77%, 57%)',
    '600': 'hsl(343, 67%, 50%)',
    '700': 'hsl(342, 71%, 41%)',
    '800': 'hsl(340, 68%, 35%)',
    '900': 'hsl(338, 65%, 30%)',
    '950': 'hsl(339, 75%, 16%)',
},


'cerise-red': {
    '50': 'oklch(97.11% 0.01 5.80)',
    '100': 'oklch(94.43% 0.03 8.60)',
    '200': 'oklch(89.68% 0.05 4.04)',
    '300': 'oklch(81.59% 0.09 6.51)',
    '400': 'oklch(72.30% 0.15 8.36)',
    '500': 'oklch(62.34% 0.20 11.97)',
    '600': 'oklch(57.37% 0.20 10.60)',
    '700': 'oklch(50.11% 0.18 10.19)',
    '800': 'oklch(44.49% 0.16 6.85)',
    '900': 'oklch(40.38% 0.14 4.02)',
    '950': 'oklch(26.68% 0.09 5.69)',
},


--cerise-red-50: #fef2f4;
--cerise-red-100: #fde6e9;
--cerise-red-200: #fbd0d9;
--cerise-red-300: #f7aab9;
--cerise-red-400: #f27a93;
--cerise-red-500: #e63f66;
--cerise-red-600: #d42a5b;
--cerise-red-700: #b21e4b;
--cerise-red-800: #951c45;
--cerise-red-900: #801b40;
--cerise-red-950: #470a1f;



--cerise-red-50: 254 242 244;
--cerise-red-100: 253 230 233;
--cerise-red-200: 251 208 217;
--cerise-red-300: 247 170 185;
--cerise-red-400: 242 122 147;
--cerise-red-500: 230 63 102;
--cerise-red-600: 212 42 91;
--cerise-red-700: 178 30 75;
--cerise-red-800: 149 28 69;
--cerise-red-900: 128 27 64;
--cerise-red-950: 71 10 31;



$cerise-red-50: #fef2f4;
$cerise-red-100: #fde6e9;
$cerise-red-200: #fbd0d9;
$cerise-red-300: #f7aab9;
$cerise-red-400: #f27a93;
$cerise-red-500: #e63f66;
$cerise-red-600: #d42a5b;
$cerise-red-700: #b21e4b;
$cerise-red-800: #951c45;
$cerise-red-900: #801b40;
$cerise-red-950: #470a1f;



<svg width="1100" height="100" viewBox="0 0 1100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
    <rect width="100" height="100" fill="#fef2f4" x="0" y="0"/>
    <rect width="100" height="100" fill="#fde6e9" x="100" y="0"/>
    <rect width="100" height="100" fill="#fbd0d9" x="200" y="0"/>
    <rect width="100" height="100" fill="#f7aab9" x="300" y="0"/>
    <rect width="100" height="100" fill="#f27a93" x="400" y="0"/>
    <rect width="100" height="100" fill="#e63f66" x="500" y="0"/>
    <rect width="100" height="100" fill="#d42a5b" x="600" y="0"/>
    <rect width="100" height="100" fill="#b21e4b" x="700" y="0"/>
    <rect width="100" height="100" fill="#951c45" x="800" y="0"/>
    <rect width="100" height="100" fill="#801b40" x="900" y="0"/>
    <rect width="100" height="100" fill="#470a1f" x="1000" y="0"/>
</svg>


Examples
The Cerise Red Illustration
Date
mo
tu
we
th
fr
sa
su
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
september 2022



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Cancel Continue
75%
The Cerise Red project
Banner
Title of the banner
Body text of the banner.
Learn more

Buttons

DefaultHoverActiveDisabledButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButtonButton

Feedback & Requests·@erikdevries_nl