Closed
Description
openedon May 6, 2024
Part of #3592
Description
The new color system introduced in #3959 replaces all current colors and introduces new ones in a lightness scale ranging from 1 to 13. In this ticket, you can find the hexcode of all colors and a table showing which color from the new system replace the current ones.
The color semantic documentation will be address in a different ticket.
New colors
In this link you can find the whole set.
:root {
black: #000;
white: #fff;
yellow: #fde034;
pink: #ad1f85;
gray: #232323;
gray-1: #f7f7f7;
gray-2: #ededed;
gray-3: #dfdfdf;
gray-4: #c5c5c5;
gray-5: #a9a9a9;
gray-6: #929292;
gray-7: #7d7d7d;
gray-8: #676767;
gray-9: #565656;
gray-10: #474747;
gray-11: #363636;
gray-12: #232323;
gray-13: #0d0d0d;
pink-1: #fcf4fa;
pink-2: #f9e7f3;
pink-3: #f9d2ec;
pink-4: #efadd9;
pink-5: #eb7dc8;
pink-6: #eb3bbf;
pink-7: #d028a3;
pink-8: #ad1f85;
pink-9: #911a71;
pink-10: #79165d;
pink-11: #5e1241;
pink-12: #3e0c2a;
pink-13: #1b0410;
yellow-1: #fff9d4;
yellow-2: #feefa0;
yellow-3: #fde034;
yellow-4: #e5c428;
yellow-5: #c7a714;
yellow-6: #ad9011;
yellow-7: #977a17;
yellow-8: #81620c;
yellow-9: #6c5113;
yellow-10: #5e4012;
yellow-11: #4a300c;
yellow-12: #331d05;
yellow-13: #180801;
gray-1-10: #f7f7f71a;
gray-1-20: #f7f7f733;
gray-1-30: #f7f7f74d;
gray-1-40: #f7f7f766;
gray-1-50: #f7f7f780;
gray-1-60: #f7f7f799;
gray-1-70: #f7f7f7b2;
gray-1-80: #f7f7f7cc;
gray-1-90: #f7f7f7e5;
gray-12-10: #2323231a;
gray-12-20: #23232333;
gray-12-30: #2323234d;
gray-12-40: #23232366;
gray-12-50: #23232380;
gray-12-60: #23232399;
gray-12-70: #232323b2;
gray-12-80: #232323cc;
gray-12-90: #232323e5;
gray-13-0: #0d0d0d00;
white-0: #fff0;
info-1: #f5f7fb;
info-2: #e6edfc;
info-3: #d3dffb;
info-4: #aec5f7;
info-5: #89a7ef;
info-6: #678ded;
info-7: #4571f2;
info-8: #274fed;
info-9: #1935dd;
info-10: #1835ab;
info-11: #192f73;
info-12: #122047;
info-13: #060c1c;
warning-1: #fcf6f0;
warning-2: #faead9;
warning-3: #f9d9b4;
warning-4: #f1ba77;
warning-5: #e2972b;
warning-6: #c7810a;
warning-7: #ac6e00;
warning-8: #8d5b0d;
warning-9: #764c0b;
warning-10: #643e00;
warning-11: #4b2f05;
warning-12: #341e00;
warning-13: #160a00;
success-1: #f1fbef;
success-2: #dff5db;
success-3: #caeac1;
success-4: #a1d695;
success-5: #6cc258;
success-6: #47ac29;
success-7: #2f9600;
success-8: #257c00;
success-9: #1d6800;
success-10: #175600;
success-11: #104200;
success-12: #072c00;
success-13: #021200;
error-1: #fdf5f3;
error-2: #fee7e4;
error-3: #f9d6d0;
error-4: #f5b2a7;
error-5: #f78273;
error-6: #f45344;
error-7: #dd362a;
error-8: #ba251c;
error-9: #9b221a;
error-10: #801e16;
error-11: #631610;
error-12: #420e09;
error-13: #1e0302;
}
Colors replacement
Beyond the implementation process, it might be important to document which color of the current palette has an equivalent version in the new one.
Below you can find the corresponding version all brand and UI colors referred in the tailwind config file and the viewer.
Brand
| Current | New | ||
|---|---|---|---|
| Yellow | #FFE033 | Yellow 3 | #FDE034 |
| Pink | #C52B9B | Pink 8 | #AD1F85 |
| Dark Charcoal | #30272E | Gray 12 | #232323 |
Dark charcoal shades
| Current | New | ||
|---|---|---|---|
| Dark Charcoal 6 | #F3F2F2 | Gray 1 | #F7F7F7 |
| Dark Charcoal 10 | #EAE9EA | Gray 2 | #EDEDED |
| Dark Charcoal 20 | #D6D4D5 | Gray 3 | #DFDFDF |
| Dark Charcoal 30 | #C1BEC0 | Gray 4 | #C5C5C5 |
| Dark Charcoal 40 | #ACA9AB | Gray 5 | #A9A9A9 |
| Dark Charcoal 50 | #989397 | Gray 6 | #929292 |
| Dark Charcoal 60 | #837D82 | Gray 7 | #7E7E7E |
| Dark Charcoal 70 | #6E686D | Gray 8 | #676767 |
| Gray 9 | #565656 | ||
| Dark Charcoal 80 | #595258 | Gray 10 | #474747 |
| Dark Charcoal 90 | #453D43 | Gray 11 | #363636 |
| Dark Charcoal | #30272E | Gray 12 | #232323 |
| Gray 13 | #0D0D0D |
Dark charcoal opacities
| Current | New |
|---|---|
| Dark Charcoal 10% | Gray 12 10% |
| Dark Charcoal 20% | Gray 12 20% |
| Dark Charcoal 30% | Gray 12 30% |
| Dark Charcoal 40% | Gray 12 40% |
| Dark Charcoal 50% | Gray 12 50% |
| Dark Charcoal 60% | Gray 12 60% |
| Dark Charcoal 70% | Gray 12 70% |
| Dark Charcoal 80% | Gray 12 80% |
| Dark Charcoal 90% | Gray 12 90% |
Notifications
| Current | New |
|---|---|
| Info | Info 8 |
| Info soft | Info 2 |
| Warning | Warning 8 |
| Warning soft | Warning 2 |
| Success | Success 8 |
| Success soft | Success 2 |
| Error | Error 8 |
| Error soft | Error 2 |
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Metadata
Assignees
Labels
Type
Projects
Status
✅ Done