1import chroma from "chroma-js";
2import { generateColorSet } from "../algorithm";
3import { ColorFamily } from "../types";
4
5// Colors should use the LCH color space.
6// https://www.w3.org/TR/css-color-4/#lch-colors
7
8export const black = chroma.lch(0, 0, 0);
9
10export const white = chroma.lch(150, 0, 0);
11
12// Gray ======================================== //
13
14const gray: ColorFamily = generateColorSet({
15 name: "gray",
16 color: {
17 start: "#F0F0F0",
18 middle: "#787878",
19 end: "#0F0F0F",
20 },
21});
22
23export const grayLight = chroma.scale(gray.colors).mode("lch");
24export const grayDark = chroma.scale(gray.invertedColors).mode("lch");
25
26// Rose ======================================== //
27
28const rose: ColorFamily = generateColorSet({
29 name: "rose",
30 color: {
31 start: "#FFF1F2",
32 middle: "#F43F5E",
33 end: "#881337",
34 },
35});
36
37export const roseLight = chroma.scale(rose.colors).mode("lch");
38export const roseDark = chroma.scale(rose.invertedColors).mode("lch");
39
40// Red ======================================== //
41
42const red: ColorFamily = generateColorSet({
43 name: "red",
44 color: {
45 start: "#FEF2F2",
46 middle: "#EF4444",
47 end: "#7F1D1D",
48 },
49});
50
51export const redLight = chroma.scale(red.colors).mode("lch");
52export const redDark = chroma.scale(red.invertedColors).mode("lch");
53
54// Orange ======================================== //
55
56const orange: ColorFamily = generateColorSet({
57 name: "orange",
58 color: {
59 start: "#FFF7ED",
60 middle: "#F97316",
61 end: "#7C2D12",
62 },
63});
64
65export const orangeLight = chroma.scale(orange.colors).mode("lch");
66export const orangeDark = chroma.scale(orange.invertedColors).mode("lch");
67
68// Amber ======================================== //
69
70const amber: ColorFamily = generateColorSet({
71 name: "amber",
72 color: {
73 start: "#FFFBEB",
74 middle: "#F59E0B",
75 end: "#78350F",
76 },
77});
78
79export const amberLight = chroma.scale(amber.colors).mode("lch");
80export const amberDark = chroma.scale(amber.invertedColors).mode("lch");
81
82// Yellow ======================================== //
83
84const yellow: ColorFamily = generateColorSet({
85 name: "yellow",
86 color: {
87 start: "#FEFCE8",
88 middle: "#FADB15",
89 end: "#715E12",
90 },
91});
92
93export const yellowLight = chroma.scale(yellow.colors).mode("lch");
94export const yellowDark = chroma.scale(yellow.invertedColors).mode("lch");
95
96// Lime ======================================== //
97
98const lime: ColorFamily = generateColorSet({
99 name: "lime",
100 color: {
101 start: "#F7FEE7",
102 middle: "#32CD32",
103 end: "#295214",
104 },
105});
106
107export const limeLight = chroma.scale(lime.colors).mode("lch");
108export const limeDark = chroma.scale(lime.invertedColors).mode("lch");
109
110// Green ======================================== //
111
112const green: ColorFamily = generateColorSet({
113 name: "green",
114 color: {
115 start: "#F1FDF0",
116 middle: "#43c84c",
117 end: "#155117",
118 },
119});
120
121export const greenLight = chroma.scale(green.colors).mode("lch");
122export const greenDark = chroma.scale(green.invertedColors).mode("lch");
123
124// Emerald ======================================== //
125
126const emerald: ColorFamily = generateColorSet({
127 name: "emerald",
128 color: {
129 start: "#F0FDF4",
130 middle: "#51C878",
131 end: "#134E29",
132 },
133});
134
135export const emeraldLight = chroma.scale(emerald.colors).mode("lch");
136export const emeraldDark = chroma.scale(emerald.invertedColors).mode("lch");
137
138// Jade ======================================== //
139
140const jade: ColorFamily = generateColorSet({
141 name: "jade",
142 color: {
143 start: "#ECFDF5",
144 middle: "#1ABD82",
145 end: "#064E3B",
146 },
147});
148
149export const jadeLight = chroma.scale(jade.colors).mode("lch");
150export const jadeDark = chroma.scale(jade.invertedColors).mode("lch");
151
152// Teal ======================================== //
153
154const teal: ColorFamily = generateColorSet({
155 name: "teal",
156 color: {
157 start: "#E6FFFA",
158 middle: "#14B8A6",
159 end: "#134E4A",
160 },
161});
162
163export const tealLight = chroma.scale(teal.colors).mode("lch");
164export const tealDark = chroma.scale(teal.invertedColors).mode("lch");
165
166// Cyan ======================================== //
167
168const cyan = generateColorSet({
169 name: "cyan",
170 color: {
171 start: "#E0F7FA",
172 middle: "#00BCD4",
173 end: "#006064",
174 },
175});
176
177export const cyanLight = chroma.scale(cyan.colors).mode("lch");
178export const cyanDark = chroma.scale(cyan.invertedColors).mode("lch");
179
180// Light Blue ======================================== //
181
182const lightBlue = generateColorSet({
183 name: "lightBlue",
184 color: {
185 start: "#E1F5FE",
186 middle: "#03A9F4",
187 end: "#01579B",
188 },
189});
190
191export const lightBlueLight = chroma.scale(lightBlue.colors).mode("lch");
192export const lightBlueDark = chroma.scale(lightBlue.invertedColors).mode("lch");
193
194// Blue ======================================== //
195
196const blue = generateColorSet({
197 name: "blue",
198 color: {
199 start: "#E3F2FD",
200 middle: "#3B82F6",
201 end: "#0D47A1",
202 },
203});
204
205export const blueLight = chroma.scale(blue.colors).mode("lch");
206export const blueDark = chroma.scale(blue.colors).mode("lch");
207
208// Indigo ======================================== //
209
210const indigo = generateColorSet({
211 name: "indigo",
212 color: {
213 start: "#e8eaf7",
214 middle: "#586cc6",
215 end: "#182383",
216 },
217});
218
219export const indigoLight = chroma.scale(indigo.colors).mode("lch");
220export const indigoDark = chroma.scale(indigo.colors).mode("lch");
221
222// Violet ======================================== //
223
224const violet = generateColorSet({
225 name: "violet",
226 color: {
227 start: "#f6e4f6",
228 middle: "#b93ec2",
229 end: "#490d85",
230 },
231});
232
233export const violetLight = chroma.scale(violet.colors).mode("lch");
234export const violetDark = chroma.scale(violet.colors).mode("lch");
235
236// Pink ======================================== //
237
238const pink = generateColorSet({
239 name: "pink",
240 color: {
241 start: "#ffe3ec",
242 middle: "#ff257a",
243 end: "#950050",
244 },
245});
246
247export const pinkLight = chroma.scale(pink.colors).mode("lch");
248export const pinkDark = chroma.scale(pink.colors).mode("lch");
249
250// Brown ======================================== //
251
252const brown = generateColorSet({
253 name: "brown",
254 color: {
255 start: "#f0ebe9",
256 middle: "#936c61",
257 end: "#422622",
258 },
259});
260
261export const brownLight = chroma.scale(brown.colors).mode("lch");
262export const brownDark = chroma.scale(brown.colors).mode("lch");