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
Chestnut
Contrast gridExportEditSave
50
fcf5f4
100
fae8e6
200
f6d5d2
300
efb7b2
400
e48d85
500
d6675d
Unlock
600
c4544a
700
a23c33
800
86352e
900
70322c
950
3c1613
Contrast grid

By mid-January 2024, the contrast grid can only be used with a UI Colors Pro
subscription.
Method
APCA (Possible WCAG 3)
WCAG 2
Score
60%+ (Similar to AA)
80%+ (Similar to AAA)
All

White50100200300400500600700800900950BlackWhite






-68%
-76%
-87%
-92%
-96%
-105%
-108%
50






-62%
-70%
-81%
-87%
-90%
-100%
-102%
100







-63%
-74%
-80%
-84%
-93%
-95%
200








-64%
-70%
-74%
-83%
-86%
300











-69%
-71%
400













500
62%












600
70%
65%











700
81%
76%
70%
61%









800
88%
83%
76%
67%









900
92%
87%
81%
72%









950
103%
97%
91%
82%
69%








Black
106%
101%
95%
86%
72%









Export code

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

'chestnut': {
    '50': '#fcf5f4',
    '100': '#fae8e6',
    '200': '#f6d5d2',
    '300': '#efb7b2',
    '400': '#e48d85',
    '500': '#d6675d',
    '600': '#c4544a',
    '700': '#a23c33',
    '800': '#86352e',
    '900': '#70322c',
    '950': '#3c1613',
},


'chestnut': {
    '50': 'hsl(7, 57%, 97%)',
    '100': 'hsl(6, 67%, 94%)',
    '200': 'hsl(5, 67%, 89%)',
    '300': 'hsl(5, 66%, 82%)',
    '400': 'hsl(5, 64%, 71%)',
    '500': 'hsl(5, 60%, 60%)',
    '600': 'hsl(5, 51%, 53%)',
    '700': 'hsl(5, 52%, 42%)',
    '800': 'hsl(5, 49%, 35%)',
    '900': 'hsl(5, 44%, 31%)',
    '950': 'hsl(4, 52%, 15%)',
},


'chestnut': {
    '50': 'oklch(97.53% 0.01 27.23)',
    '100': 'oklch(94.48% 0.02 25.17)',
    '200': 'oklch(89.98% 0.04 24.03)',
    '300': 'oklch(82.89% 0.07 24.43)',
    '400': 'oklch(73.17% 0.11 25.67)',
    '500': 'oklch(64.45% 0.14 26.97)',
    '600': 'oklch(58.74% 0.15 27.52)',
    '700': 'oklch(49.73% 0.14 28.08)',
    '800': 'oklch(44.06% 0.11 27.56)',
    '900': 'oklch(39.97% 0.09 27.40)',
    '950': 'oklch(25.81% 0.06 26.70)',
},


--chestnut-50: #fcf5f4;
--chestnut-100: #fae8e6;
--chestnut-200: #f6d5d2;
--chestnut-300: #efb7b2;
--chestnut-400: #e48d85;
--chestnut-500: #d6675d;
--chestnut-600: #c4544a;
--chestnut-700: #a23c33;
--chestnut-800: #86352e;
--chestnut-900: #70322c;
--chestnut-950: #3c1613;



--chestnut-50: 252 245 244;
--chestnut-100: 250 232 230;
--chestnut-200: 246 213 210;
--chestnut-300: 239 183 178;
--chestnut-400: 228 141 133;
--chestnut-500: 214 103 93;
--chestnut-600: 196 84 74;
--chestnut-700: 162 60 51;
--chestnut-800: 134 53 46;
--chestnut-900: 112 50 44;
--chestnut-950: 60 22 19;



$chestnut-50: #fcf5f4;
$chestnut-100: #fae8e6;
$chestnut-200: #f6d5d2;
$chestnut-300: #efb7b2;
$chestnut-400: #e48d85;
$chestnut-500: #d6675d;
$chestnut-600: #c4544a;
$chestnut-700: #a23c33;
$chestnut-800: #86352e;
$chestnut-900: #70322c;
$chestnut-950: #3c1613;



<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="#fcf5f4" x="0" y="0"/>
    <rect width="100" height="100" fill="#fae8e6" x="100" y="0"/>
    <rect width="100" height="100" fill="#f6d5d2" x="200" y="0"/>
    <rect width="100" height="100" fill="#efb7b2" x="300" y="0"/>
    <rect width="100" height="100" fill="#e48d85" x="400" y="0"/>
    <rect width="100" height="100" fill="#d6675d" x="500" y="0"/>
    <rect width="100" height="100" fill="#c4544a" x="600" y="0"/>
    <rect width="100" height="100" fill="#a23c33" x="700" y="0"/>
    <rect width="100" height="100" fill="#86352e" x="800" y="0"/>
    <rect width="100" height="100" fill="#70322c" x="900" y="0"/>
    <rect width="100" height="100" fill="#3c1613" 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 Chestnut 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 Chestnut 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