Skip to content

Commit 2746fe8

Browse files
kepanokepano
committed
Add full range of colors to readme
1 parent 20636eb commit 2746fe8

File tree

2 files changed

+215
-51
lines changed

2 files changed

+215
-51
lines changed

‎README.md

Lines changed: 187 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -79,49 +79,196 @@ Flexoki is MIT licensed. You are free to port Flexoki to any app. Please include
7979

8080
## Colors
8181

82-
Please [see documentation](https://stephango.com/flexoki) for how to apply these colors.
83-
84-
### Base tones
85-
86-
| Value | Hex | RGB |
87-
| ----- | --------- | --------------- |
88-
| black | `#100F0F` | `16, 15, 15` |
89-
| 950 | `#1C1B1A` | `28, 27, 26` |
90-
| 900 | `#282726` | `40, 39, 38` |
91-
| 850 | `#343331` | `52, 51, 49` |
92-
| 800 | `#403E3C` | `64, 62, 60` |
93-
| 700 | `#575653` | `87, 86, 83` |
94-
| 600 | `#6F6E69` | `111, 110, 105` |
95-
| 500 | `#878580` | `135, 133, 128` |
96-
| 300 | `#B7B5AC` | `183, 181, 172` |
97-
| 200 | `#CECDC3` | `206, 205, 195` |
98-
| 150 | `#DAD8CE` | `218, 216, 206` |
99-
| 100 | `#E6E4D9` | `230, 228, 217` |
100-
| 50 | `#F2F0E5` | `242, 240, 229` |
101-
| paper | `#FFFCF0` | `255, 252, 240` |
82+
Please [see documentation](https://stephango.com/flexoki) for how to apply these colors. The standard palette uses the base colors, and the 400/600 accent color values. The [extended palette](https://stephango.com/flexoki#extended-palette) adds a full range of values from 50-950 for UIs and more complex projects.
83+
84+
### Base
85+
86+
| Name | Hex | RGB |
87+
| ------------ | ---------- | --------------- |
88+
| paper | `#FFFCF0` | `255, 252, 240` |
89+
| base-50 | `#F2F0E5` | `242, 240, 229` |
90+
| base-100 | `#E6E4D9` | `230, 228, 217` |
91+
| base-150 | `#DAD8CE` | `218, 216, 206` |
92+
| base-200 | `#CECDC3` | `206, 205, 195` |
93+
| base-300 | `#B7B5AC` | `183, 181, 172` |
94+
| base-400 | `#9F9D96` | `159, 157, 150` |
95+
| base-500 | `#878580` | `135, 133, 128` |
96+
| base-600 | `#6F6E69` | `111, 110, 105` |
97+
| base-700 | `#575653` | `87, 86, 83` |
98+
| base-800 | `#403E3C` | `64, 62, 60` |
99+
| base-850 | `#343331` | `52, 51, 49` |
100+
| base-900 | `#282726` | `40, 39, 38` |
101+
| base-950 | `#1C1B1A` | `28, 27, 26` |
102+
| black | `#100F0F` | `16, 15, 15` |
102103

103104
### Dark colors
104105

105-
| Color | Hex | RGB |
106-
| ------- | --------- | -------------- |
107-
| red | `#AF3029` | `175, 48, 41` |
108-
| orange | `#BC5215` | `188, 82, 21` |
109-
| yellow | `#AD8301` | `173, 131, 1` |
110-
| green | `#66800B` | `102, 128, 11` |
111-
| cyan | `#24837B` | `36, 131, 123` |
112-
| blue | `#205EA6` | `32, 94, 166` |
113-
| purple | `#5E409D` | `94, 64, 157` |
114-
| magenta | `#A02F6F` | `160, 47, 111` |
106+
| Color | Hex | RGB |
107+
| ----------- | --------- | -------------- |
108+
| red-600 | `#AF3029` | `175, 48, 41` |
109+
| orange-600 | `#BC5215` | `188, 82, 21` |
110+
| yellow-600 | `#AD8301` | `173, 131, 1` |
111+
| green-600 | `#66800B` | `102, 128, 11` |
112+
| cyan-600 | `#24837B` | `36, 131, 123` |
113+
| blue-600 | `#205EA6` | `32, 94, 166` |
114+
| purple-600 | `#5E409D` | `94, 64, 157` |
115+
| magenta-600 | `#A02F6F` | `160, 47, 111` |
115116

116117
### Light colors
117118

118-
| Color | Hex | RGB |
119-
| ------- | --------- | --------------- |
120-
| red | `#D14D41` | `209, 77, 65` |
121-
| orange | `#DA702C` | `218, 112, 44` |
122-
| yellow | `#D0A215` | `208, 162, 21` |
123-
| green | `#879A39` | `135, 154, 57` |
124-
| cyan | `#3AA99F` | `58, 169, 159` |
125-
| blue | `#4385BE` | `67, 133, 190` |
126-
| purple | `#8B7EC8` | `139, 126, 200` |
127-
| magenta | `#CE5D97` | `206, 93, 151` |
119+
| Color | Hex | RGB |
120+
| ----------- | --------- | --------------- |
121+
| red-400 | `#D14D41` | `209, 77, 65` |
122+
| orange-400 | `#DA702C` | `218, 112, 44` |
123+
| yellow-400 | `#D0A215` | `208, 162, 21` |
124+
| green-400 | `#879A39` | `135, 154, 57` |
125+
| cyan-400 | `#3AA99F` | `58, 169, 159` |
126+
| blue-400 | `#4385BE` | `67, 133, 190` |
127+
| purple-400 | `#8B7EC8` | `139, 126, 200` |
128+
| magenta-400 | `#CE5D97` | `206, 93, 151` |
129+
130+
## Extended palette
131+
132+
### Red
133+
134+
| Name | Hex | RGB |
135+
| ------------ | ---------- | --------------- |
136+
| red-50 | `#FFE1D5` | `255, 225, 213` |
137+
| red-100 | `#FFCABB` | `255, 202, 187` |
138+
| red-150 | `#FDB2A2` | `253, 178, 162` |
139+
| red-200 | `#F89A8A` | `248, 154, 138` |
140+
| red-300 | `#E8705F` | `232, 112, 95` |
141+
| red-400 | `#D14D41` | `209, 77, 65` |
142+
| red-500 | `#C03E35` | `192, 62, 53` |
143+
| red-600 | `#AF3029` | `175, 48, 41` |
144+
| red-700 | `#942822` | `148, 40, 34` |
145+
| red-800 | `#6C201C` | `108, 32, 28` |
146+
| red-850 | `#551B18` | `85, 27, 24` |
147+
| red-900 | `#3E1715` | `62, 23, 21` |
148+
| red-950 | `#261312` | `38, 19, 18` |
149+
150+
### Orange
151+
152+
| Name | Hex | RGB |
153+
| ------------ | ---------- | --------------- |
154+
| orange-50 | `#FFE7CE` | `255, 231, 206` |
155+
| orange-100 | `#FED3AF` | `254, 211, 175` |
156+
| orange-150 | `#FCC192` | `252, 193, 146` |
157+
| orange-200 | `#F9AE77` | `249, 174, 119` |
158+
| orange-300 | `#EC8B49` | `236, 139, 73` |
159+
| orange-400 | `#DA702C` | `218, 112, 44` |
160+
| orange-500 | `#CB6120` | `203, 97, 32` |
161+
| orange-600 | `#BC5215` | `188, 82, 21` |
162+
| orange-700 | `#9D4310` | `157, 67, 16` |
163+
| orange-800 | `#71320D` | `113, 50, 13` |
164+
| orange-850 | `#59290D` | `89, 41, 13` |
165+
| orange-900 | `#40200D` | `64, 32, 13` |
166+
| orange-950 | `#27180E` | `39, 24, 14` |
167+
168+
### Yellow
169+
170+
| Name | Hex | RGB |
171+
| ------------ | ---------- | --------------- |
172+
| yellow-50 | `#FAEEC6` | `250, 238, 198` |
173+
| yellow-100 | `#F6E2A0` | `246, 226, 160` |
174+
| yellow-150 | `#F1D67E` | `241, 214, 126` |
175+
| yellow-200 | `#ECCB60` | `236, 203, 96` |
176+
| yellow-300 | `#DFB431` | `223, 180, 49` |
177+
| yellow-400 | `#D0A215` | `208, 162, 21` |
178+
| yellow-500 | `#BE9207` | `190, 146, 7` |
179+
| yellow-600 | `#AD8301` | `173, 131, 1` |
180+
| yellow-700 | `#8E6B01` | `142, 107, 1` |
181+
| yellow-800 | `#664D01` | `102, 77, 1` |
182+
| yellow-850 | `#503D02` | `80, 61, 2` |
183+
| yellow-900 | `#3A2D04` | `58, 45, 4` |
184+
| yellow-950 | `#241E08` | `36, 30, 8` |
185+
186+
### Green
187+
188+
| Name | Hex | RGB |
189+
| ------------ | ---------- | --------------- |
190+
| green-50 | `#EDEECF` | `237, 238, 207` |
191+
| green-100 | `#DDE2B2` | `221, 226, 178` |
192+
| green-150 | `#CDD597` | `205, 213, 151` |
193+
| green-200 | `#BEC97E` | `190, 201, 126` |
194+
| green-300 | `#A0AF54` | `160, 175, 84` |
195+
| green-400 | `#879A39` | `135, 154, 57` |
196+
| green-500 | `#768D21` | `118, 141, 33` |
197+
| green-600 | `#66800B` | `102, 128, 11` |
198+
| green-700 | `#536907` | `83, 105, 7` |
199+
| green-800 | `#3D4C07` | `61, 76, 7` |
200+
| green-850 | `#313D07` | `49, 61, 7` |
201+
| green-900 | `#252D09` | `37, 45, 9` |
202+
| green-950 | `#1A1E0C` | `26, 30, 12` |
203+
204+
### Cyan
205+
206+
| Name | Hex | RGB |
207+
| ------------ | ---------- | --------------- |
208+
| cyan-50 | `#DDF1E4` | `221, 241, 228` |
209+
| cyan-100 | `#BFE8D9` | `191, 232, 217` |
210+
| cyan-150 | `#A2DECE` | `162, 222, 206` |
211+
| cyan-200 | `#87D3C3` | `135, 211, 195` |
212+
| cyan-300 | `#5ABDAC` | `90, 189, 172` |
213+
| cyan-400 | `#3AA99F` | `58, 169, 159` |
214+
| cyan-500 | `#2F968D` | `47, 150, 141` |
215+
| cyan-600 | `#24837B` | `36, 131, 123` |
216+
| cyan-700 | `#1C6C66` | `28, 108, 102` |
217+
| cyan-800 | `#164F4A` | `22, 79, 74` |
218+
| cyan-850 | `#143F3C` | `20, 63, 60` |
219+
| cyan-900 | `#122F2C` | `18, 47, 44` |
220+
| cyan-950 | `#101F1D` | `16, 31, 29` |
221+
222+
### Blue
223+
224+
| Name | Hex | RGB |
225+
| ------------ | ---------- | --------------- |
226+
| blue-50 | `#E1ECEB` | `225, 236, 235` |
227+
| blue-100 | `#C6DDE8` | `198, 221, 232` |
228+
| blue-150 | `#ABCFE2` | `171, 207, 226` |
229+
| blue-200 | `#92BFDB` | `146, 191, 219` |
230+
| blue-300 | `#66A0C8` | `102, 160, 200` |
231+
| blue-400 | `#4385BE` | `67, 133, 190` |
232+
| blue-500 | `#3171B2` | `49, 113, 178` |
233+
| blue-600 | `#205EA6` | `32, 94, 166` |
234+
| blue-700 | `#1A4F8C` | `26, 79, 140` |
235+
| blue-800 | `#163B66` | `22, 59, 102` |
236+
| blue-850 | `#133051` | `19, 48, 81` |
237+
| blue-900 | `#12253B` | `18, 37, 59` |
238+
| blue-950 | `#101A24` | `16, 26, 36` |
239+
240+
### Purple
241+
242+
| Name | Hex | RGB |
243+
| ------------ | ---------- | --------------- |
244+
| purple-50 | `#F0EAEC` | `240, 234, 236` |
245+
| purple-100 | `#E2D9E9` | `226, 217, 233` |
246+
| purple-150 | `#D3CAE6` | `211, 202, 230` |
247+
| purple-200 | `#C4B9E0` | `196, 185, 224` |
248+
| purple-300 | `#A699D0` | `166, 153, 208` |
249+
| purple-400 | `#8B7EC8` | `139, 126, 200` |
250+
| purple-500 | `#735EB5` | `115, 94, 181` |
251+
| purple-600 | `#5E409D` | `94, 64, 157` |
252+
| purple-700 | `#4F3685` | `79, 54, 133` |
253+
| purple-800 | `#3C2A62` | `60, 42, 98` |
254+
| purple-850 | `#31234E` | `49, 35, 78` |
255+
| purple-900 | `#261C39` | `38, 28, 57` |
256+
| purple-950 | `#1A1623` | `26, 22, 35` |
257+
258+
### Magenta
259+
260+
| Name | Hex | RGB |
261+
| ------------ | ---------- | --------------- |
262+
| magenta-50 | `#FEE4E5` | `254, 228, 229` |
263+
| magenta-100 | `#FCCFDA` | `252, 207, 218` |
264+
| magenta-150 | `#F9B9CF` | `249, 185, 207` |
265+
| magenta-200 | `#F4A4C2` | `244, 164, 194` |
266+
| magenta-300 | `#E47DA8` | `228, 125, 168` |
267+
| magenta-400 | `#CE5D97` | `206, 93, 151` |
268+
| magenta-500 | `#B74583` | `183, 69, 131` |
269+
| magenta-600 | `#A02F6F` | `160, 47, 111` |
270+
| magenta-700 | `#87285E` | `135, 40, 94` |
271+
| magenta-800 | `#641F46` | `100, 31, 70` |
272+
| magenta-850 | `#4F1B39` | `79, 27, 57` |
273+
| magenta-900 | `#39172B` | `57, 23, 43` |
274+
| magenta-950 | `#24131D` | `36, 19, 29` |

‎_playground/playground.js

Lines changed: 28 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -548,22 +548,39 @@ document.addEventListener('DOMContentLoaded', () => {
548548

549549
function hexToRGBString(hex) {
550550
const rgb = hexToRGB(hex);
551-
return `${Math.round(rgb[0] * 255)}, ${Math.round(rgb[1] * 255)}, ${Math.round(rgb[2] * 255)}`;
551+
return [
552+
Math.round(rgb[0] * 255),
553+
Math.round(rgb[1] * 255),
554+
Math.round(rgb[2] * 255)
555+
].join(', '); // Just join with commas and spaces, no padding
552556
}
553557

554558
function updateMarkdownOutput() {
555559
let markdown = '';
556560

561+
// Helper function to pad strings to a specific length
562+
const pad = (str, len) => str.padEnd(len);
563+
564+
// Define column widths
565+
const nameWidth = 12;
566+
const hexWidth = 10; // #XXXXXX is 7 chars + backticks
567+
const rgbWidth = 15; // "255, 255, 255" + backticks
568+
569+
// Format table headers consistently
570+
const tableHeader =
571+
`| ${pad('Name', nameWidth)} | ${pad('Hex', hexWidth)} | ${pad('RGB', rgbWidth)} |\n` +
572+
`| ${'-'.repeat(nameWidth)} | ${'-'.repeat(hexWidth)} | ${'-'.repeat(rgbWidth)} |\n`;
573+
557574
// Base colors
558-
markdown += '## Base\n\n';
559-
markdown += '| Name | Hex | RGB |\n';
560-
markdown += '| - | - | - |\n';
561-
markdown += `| paper | \`${KNOWN_VALUES.paper}\` | \`${hexToRGBString(KNOWN_VALUES.paper)}\` |\n`;
562-
markdown += `| black | \`${KNOWN_VALUES.black}\` | \`${hexToRGBString(KNOWN_VALUES.black)}\` |\n`;
575+
markdown += '### Base\n\n';
576+
markdown += tableHeader;
577+
markdown += `| ${pad('paper', nameWidth)} | \`${KNOWN_VALUES.paper}\` ${pad('', hexWidth - 10)} | \`${hexToRGBString(KNOWN_VALUES.paper)}\`${pad('', rgbWidth - hexToRGBString(KNOWN_VALUES.paper).length - 2)} |\n`;
563578
[50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 850, 900, 950].forEach(step => {
564579
const hex = KNOWN_VALUES.gray[step];
565-
markdown += `| base-${step} | \`${hex}\` | \`${hexToRGBString(hex)}\` |\n`;
580+
const rgb = hexToRGBString(hex);
581+
markdown += `| ${pad(`base-${step}`, nameWidth)} | \`${hex}\` ${pad('', hexWidth - 10)} | \`${rgb}\`${pad('', rgbWidth - rgb.length - 2)} |\n`;
566582
});
583+
markdown += `| ${pad('black', nameWidth)} | \`${KNOWN_VALUES.black}\` ${pad('', hexWidth - 10)} | \`${hexToRGBString(KNOWN_VALUES.black)}\`${pad('', rgbWidth - hexToRGBString(KNOWN_VALUES.black).length - 2)} |\n`;
567584
markdown += '\n';
568585

569586
// Get the current colors from the CSS variables
@@ -578,12 +595,12 @@ function updateMarkdownOutput() {
578595

579596
// Color scales
580597
COLOR_ORDER.forEach(color => {
581-
markdown += `## ${color.charAt(0).toUpperCase() + color.slice(1)}\n\n`;
582-
markdown += '| Name | Hex | RGB |\n';
583-
markdown += '| - | - | - |\n';
598+
markdown += `### ${color.charAt(0).toUpperCase() + color.slice(1)}\n\n`;
599+
markdown += tableHeader;
584600
[50, 100, 150, 200, 300, 400, 500, 600, 700, 800, 850, 900, 950].forEach(step => {
585601
const hex = colorMap[`${color}-${step}`];
586-
markdown += `| ${color}-${step} | \`${hex}\` | \`${hexToRGBString(hex)}\` |\n`;
602+
const rgb = hexToRGBString(hex);
603+
markdown += `| ${pad(`${color}-${step}`, nameWidth)} | \`${hex}\` ${pad('', hexWidth - 10)} | \`${rgb}\`${pad('', rgbWidth - rgb.length - 2)} |\n`;
587604
});
588605
markdown += '\n';
589606
});

0 commit comments

Comments
 (0)