Components AI — A new way to explore generative design systems

ColorContrast w/ whiteContrast w/ black

#610e1a13.241.59

#70202210.951.92

#80302a8.852.37

#8f3f337.182.93

#9f4e3c5.793.63

#af5e454.664.51

#bf6d4e3.815.51

#d07d573.116.75

#e08d612.588.15

Accessible combinations

5.14

Color#610E1A

Background#E08D61

5.14

Color#E08D61

Background#610E1A

Color Scale

Canvas

First

Second

Scale Mode

Padding Left0

Padding Right0

Steps9

Css Variables

root: {
--color-0: #610e1a;
--color-1: #702022;
--color-2: #80302a;
--color-3: #8f3f33;
--color-4: #9f4e3c;
--color-5: #af5e45;
--color-6: #bf6d4e;
--color-7: #d07d57;
--color-8: #e08d61;

}

Js

{
"colors": [
"#610e1a",
"#702022",
"#80302a",
"#8f3f33",
"#9f4e3c",
"#af5e45",
"#bf6d4e",
"#d07d57",
"#e08d61",

],
}

Accessible combinations

Color Scale

.css-3p6p2u{font-size:.75rem;font-size:.75rem;font-size:.75rem;font-size:.75rem;}Css Variables

Js

Css Variables