uicolors.app Open in urlscan Pro
75.2.60.5  Public Scan

Form analysis
2 forms found in the DOM

<form class="space-y-6"><input class="form-control border px-6 py-3 w-full rounded-full" type="email" placeholder="Enter your email" value="" autocomplete="email"><input type="submit" class="px-6 py-3 rounded-full bg-primary-button text-white w-full"
    value="Send a magic link"></form>

<form class="space-y-6"><input class="form-control border px-6 py-3 w-full rounded-full" type="email" placeholder="Enter your email" autocomplete="email"><input type="submit" class="px-6 py-3 rounded-full bg-primary-button text-white w-full"
    value="Send a magic link"></form>

Text Content

Sign in

Sign in to save and edit your
custom color scales.

Sign in with Google

--------------------------------------------------------------------------------

or

--------------------------------------------------------------------------------


Give feedback
UI
Colors
Create Saved Browse Figma plugin
Sign in
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
Wewak
Contrast gridExportEditSave
50
fdf3f4
100
fbe8eb
200
f6d5da
Unlock
300
ea9daa
400
e58799
500
d75c77
600
c13d60
700
a22e4f
800
882947
900
752642
950
411020
Contrast grid

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

White50100200300400500600700800900950BlackWhite
1
1.1
1.2
1.4
2.1
2.5
3.7
5.1
6.9
8.6
9.9
15.9
21
50
1.1
1
1.1
1.2
1.9
2.3
3.4
4.7
6.3
7.9
9.1
14.6
19.3
100
1.2
1.1
1
1.2
1.8
2.2
3.1
4.3
5.9
7.3
8.4
13.5
17.8
200
1.4
1.2
1.2
1
1.6
1.9
2.7
3.8
5.1
6.3
7.3
11.7
15.4
300
2.1
1.9
1.8
1.6
1
1.2
1.7
2.4
3.3
4
4.7
7.5
9.9
400
2.5
2.3
2.2
1.9
1.2
1
1.5
2
2.7
3.4
3.9
6.3
8.3
500
3.7
3.4
3.1
2.7
1.7
1.5
1
1.4
1.9
2.3
2.7
4.3
5.7
600
5.1
4.7
4.3
3.8
2.4
2
1.4
1
1.3
1.7
1.9
3.1
4.1
700
6.9
6.3
5.9
5.1
3.3
2.7
1.9
1.3
1
1.2
1.4
2.3
3
800
8.6
7.9
7.3
6.3
4
3.4
2.3
1.7
1.2
1
1.2
1.9
2.5
900
9.9
9.1
8.4
7.3
4.7
3.9
2.7
1.9
1.4
1.2
1
1.6
2.1
950
15.9
14.6
13.5
11.7
7.5
6.3
4.3
3.1
2.3
1.9
1.6
1
1.3
Black
21
19.3
17.8
15.4
9.9
8.3
5.7
4.1
3
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

'wewak': {
    '50': '#fdf3f4',
    '100': '#fbe8eb',
    '200': '#f6d5da',
    '300': '#ea9daa',
    '400': '#e58799',
    '500': '#d75c77',
    '600': '#c13d60',
    '700': '#a22e4f',
    '800': '#882947',
    '900': '#752642',
    '950': '#411020',
},


'wewak': {
    '50': 'hsl(354, 71%, 97%)',
    '100': 'hsl(351, 70%, 95%)',
    '200': 'hsl(351, 65%, 90%)',
    '300': 'hsl(350, 65%, 77%)',
    '400': 'hsl(349, 64%, 71%)',
    '500': 'hsl(347, 61%, 60%)',
    '600': 'hsl(344, 52%, 50%)',
    '700': 'hsl(343, 56%, 41%)',
    '800': 'hsl(341, 54%, 35%)',
    '900': 'hsl(339, 51%, 30%)',
    '950': 'hsl(340, 60%, 16%)',
},


'wewak': {
    '50': 'oklch(97.22% 0.01 10.33)',
    '100': 'oklch(94.70% 0.02 6.62)',
    '200': 'oklch(90.20% 0.04 7.53)',
    '300': 'oklch(77.52% 0.09 8.39)',
    '400': 'oklch(72.80% 0.12 8.03)',
    '500': 'oklch(63.64% 0.16 9.04)',
    '600': 'oklch(55.91% 0.17 8.57)',
    '700': 'oklch(48.69% 0.15 7.91)',
    '800': 'oklch(43.44% 0.13 5.17)',
    '900': 'oklch(39.65% 0.11 1.92)',
    '950': 'oklch(26.19% 0.08 4.13)',
},


--wewak-50: #fdf3f4;
--wewak-100: #fbe8eb;
--wewak-200: #f6d5da;
--wewak-300: #ea9daa;
--wewak-400: #e58799;
--wewak-500: #d75c77;
--wewak-600: #c13d60;
--wewak-700: #a22e4f;
--wewak-800: #882947;
--wewak-900: #752642;
--wewak-950: #411020;



--wewak-50: 253 243 244;
--wewak-100: 251 232 235;
--wewak-200: 246 213 218;
--wewak-300: 234 157 170;
--wewak-400: 229 135 153;
--wewak-500: 215 92 119;
--wewak-600: 193 61 96;
--wewak-700: 162 46 79;
--wewak-800: 136 41 71;
--wewak-900: 117 38 66;
--wewak-950: 65 16 32;



$wewak-50: #fdf3f4;
$wewak-100: #fbe8eb;
$wewak-200: #f6d5da;
$wewak-300: #ea9daa;
$wewak-400: #e58799;
$wewak-500: #d75c77;
$wewak-600: #c13d60;
$wewak-700: #a22e4f;
$wewak-800: #882947;
$wewak-900: #752642;
$wewak-950: #411020;



<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="#fdf3f4" x="0" y="0"/>
    <rect width="100" height="100" fill="#fbe8eb" x="100" y="0"/>
    <rect width="100" height="100" fill="#f6d5da" x="200" y="0"/>
    <rect width="100" height="100" fill="#ea9daa" x="300" y="0"/>
    <rect width="100" height="100" fill="#e58799" x="400" y="0"/>
    <rect width="100" height="100" fill="#d75c77" x="500" y="0"/>
    <rect width="100" height="100" fill="#c13d60" x="600" y="0"/>
    <rect width="100" height="100" fill="#a22e4f" x="700" y="0"/>
    <rect width="100" height="100" fill="#882947" x="800" y="0"/>
    <rect width="100" height="100" fill="#752642" x="900" y="0"/>
    <rect width="100" height="100" fill="#411020" x="1000" y="0"/>
</svg>


Share

Share with a public link
Copy link
Sign in

Sign in to save and edit your
custom color scales.

Sign in with Google

--------------------------------------------------------------------------------

or

--------------------------------------------------------------------------------


Give feedback
Examples
The Wewak 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 Wewak project
Banner
Title of the banner
Body text of the banner.
Learn more

Buttons - Solid
Default
Button
Hover
Button
Active
Button
Disabled
Button
Buttons - Outline
Default
Button
Hover
Button
Active
Button
Disabled
Button
Buttons - Gradient
Default
Button
Hover
Button
Active
Button
Disabled
Button
Feedback & Requests·@erikdevries_nl