JSON to Typescript Converter¶
The issue I'm trying to solve is converting my JSON code file into the following format:
[
{
groupTitle: 'Basic Colors',
colors: [
{ title: 'White', value: '#ffffff', textColor: '#000', bgColor: '#ffffff' },
{ title: 'Black', value: '#000000', textColor: '#fff', bgColor: '#000000' },
{ title: 'Grey', value: '#888888', textColor: '#fff', bgColor: '#888888' },
{ title: 'Red', value: '#ff0000', textColor: '#fff', bgColor: '#ff0000' },
{ title: 'Yellow', value: '#fff000', textColor: '#000', bgColor: '#fff000' },
{ title: 'Green', value: '#00ff00', textColor: '#000', bgColor: '#00ff00' },
{ title: 'Cyan', value: '#00ffff', textColor: '#000', bgColor: '#00ffff' },
{ title: 'Blue', value: '#0000ff', textColor: '#fff', bgColor: '#0000ff' },
{ title: 'Magenta', value: '#ff00ff', textColor: '#fff', bgColor: '#ff00ff' },
],
}
]
I tried using ChatGPT to do the conversion for me, but it failed for large color groups. So this means I might have to use Python to help me do the conversion. But I can still use ChatGPT to give me the code to do so.
Prompt: "How do I load a JSON file
in Python and Jupyter Notebook?"
import json
# Open and load the JSON file
with open('data.json') as f:
data = json.load(f)
# Display the contents
print(data)
Oops, this won't work, because my file is in JavaScript code.
Next prompt: "ok, it's a js file"
Response: "If you're working with a .js file that contains JSON-like data, you'll first need to extract the JSON content from it."
What I did:
Converted my JavaScript code into a JSON format
based on ChatGPT's recommendation.
Then use the code given by ChatGPT to load the
JSON file.
In [1]:
import json
# Open and load the JSON file
with open('./data/color-groups.json') as f:
data = json.load(f)
# Display the contents
print(data)
[{'name': 'Basic Colors', 'key': 'basic', 'groups': [{'name': '', 'key': '', 'swatches': [{'name': 'White', 'key': 'white', 'hex': '#FFFFFF', 'rgb': 'rgb(255, 255, 255)', 'hsl': 'hsl(0, 0%, 100%)', 'text': '#000000'}, {'name': 'Black', 'key': 'black', 'hex': '#000000', 'rgb': 'rgb(0, 0, 0)', 'hsl': 'hsl(0, 0%, 0%)', 'text': '#FFFFFF'}, {'name': 'Gray', 'key': 'gray', 'hex': '#888888', 'rgb': 'rgb(136, 136, 136)', 'hsl': 'hsl(0, 0%, 53%)', 'text': '#000000'}, {'name': 'Red', 'key': 'red', 'hex': '#FF0000', 'rgb': 'rgb(255, 0, 0)', 'hsl': 'rgb(255, 0, 0)', 'text': '#FFFFFF'}, {'name': 'Yellow', 'key': 'yellow', 'hex': '#FFFF00', 'rgb': 'rgb(255, 255, 0)', 'hsl': 'hsl(60, 100%, 50%)', 'text': '#000000'}, {'name': 'Green', 'key': 'green', 'hex': '#00FF00', 'rgb': 'rgb(0, 255, 0)', 'hsl': 'hsl(120, 100%, 50%)', 'text': '#000000'}, {'name': 'Cyan', 'key': 'cyan', 'hex': '#00FFFF', 'rgb': 'rgb(0, 255, 255)', 'hsl': 'hsl(180, 100%, 50%)', 'text': '#000000'}, {'name': 'Blue', 'key': 'blue', 'hex': '#0000FF', 'rgb': 'rgb(0, 0, 255)', 'hsl': 'hsl(240, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Magenta', 'key': 'magenta', 'hex': '#FF00FF', 'rgb': 'rgb(255, 0, 255)', 'hsl': 'hsl(300, 100%, 50%)', 'text': '#FFFFFF'}]}]}, {'name': 'Pokémon Colors', 'key': 'pokemon', 'groups': [{'name': '', 'key': '', 'swatches': [{'name': 'Bug', 'key': 'bug', 'hex': '#A8B821', 'rgb': 'rgb(168, 184, 33)', 'hsl': 'hsl(66, 70%, 43%)', 'text': '#000000'}, {'name': 'Dark', 'key': 'dark', 'hex': '#6F5848', 'rgb': 'rgb(111, 88, 72)', 'hsl': 'hsl(25, 21%, 36%)', 'text': '#FFFFFF'}, {'name': 'Dragon', 'key': 'dragon', 'hex': '#7038F9', 'rgb': 'rgb(112, 56, 249)', 'hsl': 'hsl(257, 94%, 60%)', 'text': '#FFFFFF'}, {'name': 'Electric', 'key': 'electric', 'hex': '#F8D030', 'rbg': 'rgb(248, 208, 48)', 'hsl': 'hsl(48, 93%, 58%)', 'text': '#000000'}, {'name': 'Fairy', 'key': 'fairy', 'hex': '#FFAEC9', 'rgb': 'rgb(255, 174, 201)', 'hsl': 'hsl(340, 100%, 84%)', 'text': '#000000'}, {'name': 'Fighting', 'key': 'fighting', 'hex': '#C03028', 'rgb': 'rgb(192, 48, 40)', 'hsl': 'hsl(3, 66%, 45%)', 'text': '#FFFFFF'}, {'name': 'Fire', 'key': 'fire', 'hex': '#F07F2F', 'rgb': 'rgb(240, 127, 47)', 'hsl': 'hsl(25, 87%, 56%)', 'text': '#000000'}, {'name': 'Flying', 'key': 'flying', 'hex': '#A890F0', 'rgb': 'rgb(168, 144, 240)', 'hsl': 'hsl(255, 76%, 75%)', 'text': '#000000'}, {'name': 'Ghost', 'key': 'ghost', 'hex': '#715899', 'rgb': 'rgb(113, 88, 153)', 'hsl': 'hsl(263, 27%, 47%)', 'text': '#FFFFFF'}, {'name': 'Grass', 'key': 'grass', 'hex': '#78C750', 'rgb': 'rgb(120, 199, 80)', 'hsl': 'hsl(100, 52%, 55%)', 'text': '#000000'}, {'name': 'Ground', 'key': 'ground', 'hex': '#DEBF67', 'rgb': 'rgb(222, 191, 103)', 'hsl': 'hsl(44, 64%, 64%)', 'text': '#000000'}, {'name': 'Ice', 'key': 'ice', 'hex': '#98D8D8', 'rgb': 'rgb(152, 216, 216)', 'hsl': 'hsl(180, 45%, 72%)', 'text': '#000000'}, {'name': 'Normal', 'key': 'normal', 'hex': '#A9A878', 'rbg': 'rgb(169, 168, 120)', 'hsl': 'hsl(59, 22%, 57%)', 'text': '#000000'}, {'name': 'Poison', 'key': 'poison', 'hex': '#A040A1', 'rgb': 'rgb(160, 64, 161)', 'hsl': 'hsl(299, 43%, 44%)', 'text': '#FFFFFF'}, {'name': 'Psychic', 'key': 'psychic', 'hex': '#F85788', 'rgb': 'rgb(248, 87, 136)', 'hsl': 'hsl(342, 92%, 66%)', 'text': '#FFFFFF'}, {'name': 'Rock', 'key': 'rock', 'hex': '#B89F38', 'rgb': 'rgb(184, 159, 56)', 'hsl': 'hsl(48, 53%, 47%)', 'text': '#FFFFFF'}, {'name': 'Steel', 'key': 'steel', 'hex': '#B8B8D0', 'rgb': 'rgb(184, 184, 208)', 'hsl': 'hsl(240, 20%, 77%)', 'text': '#000000'}, {'name': 'Water', 'key': 'water', 'hex': '#6890F0', 'rgb': 'rgb(104, 144, 240)', 'hsl': 'hsl(222, 82%, 67%)', 'text': '#000000'}]}]}, {'name': 'Bootstrap Colors', 'key': 'bootstrap', 'groups': [{'name': 'Colors', 'key': '', 'swatches': [{'name': 'Blue (Primary)', 'key': 'blue', 'hex': '#007BFF', 'rgb': 'rgb(0, 123, 255)', 'hsl': 'hsl(211, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Indigo', 'key': 'indigo', 'hex': '#6610F2', 'rgb': 'rgb(102, 16, 242)', 'hsl': 'hsl(263, 90%, 51%)', 'text': '#FFFFFF'}, {'name': 'Purple', 'key': 'purple', 'hex': '#6F42C1', 'rgb': 'rgb(111, 66, 193)', 'hsl': 'hsl(261, 51%, 51%)', 'text': '#FFFFFF'}, {'name': 'Pink', 'key': 'pink', 'hex': '#E83E8C', 'rgb': 'rgb(232, 62, 140)', 'hsl': 'hsl(332, 79%, 58%)', 'text': '#FFFFFF'}, {'name': 'Red (Danger)', 'key': 'danger', 'hex': '#DC3545', 'rgb': 'rgb(220, 53, 69)', 'hsl': 'hsl(354, 70%, 54%)', 'text': '#FFFFFF'}, {'name': 'Orange', 'key': 'orange', 'hex': '#FD7E14', 'rgb': 'rgb(253, 126, 20)', 'hsl': 'hsl(27, 98%, 54%)', 'text': '#000000'}, {'name': 'Yellow (Warning)', 'key': 'yellow', 'hex': '#FFC107', 'rgb': 'rgb(255, 193, 7)', 'hsl': 'hsl(45, 100%, 51%)', 'text': '#000000'}, {'name': 'Green (Success)', 'key': 'green', 'hex': '#28A745', 'rgb': 'rgb(40, 167, 69)', 'hsl': 'hsl(134, 61%, 41%)', 'text': '#000000'}, {'name': 'Teal', 'key': 'teal', 'hex': '#20C997', 'rgb': 'rgb(32, 201, 151)', 'hsl': 'hsl(162, 73%, 46%)', 'text': '#000000'}, {'name': 'Cyan (Info)', 'key': 'cyan', 'hex': '#17A2B8', 'rgb': 'rgb(23, 162, 184)', 'hsl': 'hsl(188, 78%, 41%)', 'text': '#FFFFFF'}]}, {'name': 'Neutral', 'key': 'gray', 'swatches': [{'name': '100 (Light)', 'key': '100', 'hex': '#F8F9FA', 'rgb': 'rgb(248, 249, 250)', 'hsl': 'hsl(210, 17%, 98%)', 'text': '#000000'}, {'name': '200', 'key': '200', 'hex': '#E9ECEF', 'rgb': 'rgb(233, 236, 239)', 'hsl': 'hsl(210, 16%, 93%)', 'text': '#000000'}, {'name': '300', 'key': '300', 'hex': '#DEE2E6', 'rgb': 'rgb(222, 226, 230)', 'hsl': 'hsl(210, 14%, 89%)', 'text': '#000000'}, {'name': '400', 'key': '400', 'hex': '#CED4DA', 'rgb': 'rgb(206, 212, 218)', 'hsl': 'hsl(210, 14%, 83%)', 'text': '#000000'}, {'name': '500', 'key': '500', 'hex': '#ADB5BD', 'rgb': 'rgb(173, 181, 189)', 'hsl': 'hsl(210, 11%, 71%)', 'text': '#000000'}, {'name': '600 (Secondary)', 'key': '600', 'hex': '#6C757D', 'rgb': 'rgb(108, 117, 125)', 'hsl': 'hsl(208, 7%, 46%)', 'text': '#FFFFFF'}, {'name': '700', 'key': '700', 'hex': '#495057', 'rgb': 'rgb(73, 80, 87)', 'hsl': 'hsl(210, 9%, 31%)', 'text': '#FFFFFF'}, {'name': '800', 'key': '800', 'hex': '#343A40', 'rgb': 'rgb(52, 58, 64)', 'hsl': 'hsl(210, 10%, 23%)', 'text': '#FFFFFF'}, {'name': '900 (Dark)', 'key': '900', 'hex': '#212529', 'rgb': 'rgb(33, 37, 41)', 'hsl': 'hsl(210, 11%, 15%)', 'text': '#FFFFFF'}]}]}, {'name': 'Material Colors', 'key': 'material', 'groups': [{'name': 'Grays', 'key': 'gray', 'swatches': [{'name': 'Gray 50', 'key': '50', 'hex': '#fafafa', 'rgb': 'rgb(250, 250, 250)', 'hsl': 'hsl(0, 0%, 98%)', 'text': '#000000'}, {'name': 'Gray 100', 'key': '100', 'hex': '#f5f5f5', 'rgb': 'rgb(245, 245, 245)', 'hsl': 'hsl(0, 0%, 96%)', 'text': '#000000'}, {'name': 'Gray 200', 'key': '200', 'hex': '#eeeeee', 'rgb': 'rgb(238, 238, 238)', 'hsl': 'hsl(0, 0%, 93%)', 'text': '#000000'}, {'name': 'Gray 300', 'key': '300', 'hex': '#e0e0e0', 'rgb': 'rgb(224, 224, 224)', 'hsl': 'hsl(0, 0%, 88%)', 'text': '#000000'}, {'name': 'Gray 400', 'key': '400', 'hex': '#bdbdbd', 'rgb': 'rgb(189, 189, 189)', 'hsl': 'hsl(0, 0%, 74%)', 'text': '#000000'}, {'name': 'Gray 500', 'key': '500', 'hex': '#9e9e9e', 'rgb': 'rgb(158, 158, 158)', 'hsl': 'hsl(0, 0%, 62%)', 'text': '#000000'}, {'name': 'Gray 600', 'key': '600', 'hex': '#757575', 'rgb': 'rgb(117, 117, 117)', 'hsl': 'hsl(0, 0%, 46%)', 'text': '#FFFFFF'}, {'name': 'Gray 700', 'key': '700', 'hex': '#616161', 'rgb': 'rgb(97, 97, 97)', 'hsl': 'hsl(0, 0%, 38%)', 'text': '#FFFFFF'}, {'name': 'Gray 800', 'key': '800', 'hex': '#424242', 'rgb': 'rgb(66, 66, 66)', 'hsl': 'hsl(0, 0%, 26%)', 'text': '#FFFFFF'}, {'name': 'Gray 900', 'key': '900', 'hex': '#212121', 'rgb': 'rgb(33, 33, 33)', 'hsl': 'hsl(0, 0%, 13%)', 'text': '#FFFFFF'}]}, {'name': 'Reds', 'key': 'red', 'swatches': [{'name': 'Red 50', 'key': '50', 'hex': '#ffebee', 'rgb': 'rgb(255, 235, 238)', 'hsl': 'hsl(351, 100%, 96%)', 'text': '#000000'}, {'name': 'Red 100', 'key': '100', 'hex': '#ffcdd2', 'rgb': 'rgb(255, 205, 210)', 'hsl': 'hsl(354, 100%, 90%)', 'text': '#000000'}, {'name': 'Red 200', 'key': '200', 'hex': '#ef9a9a', 'rgb': 'rgb(239, 154, 154)', 'hsl': 'hsl(0, 73%, 77%)', 'text': '#000000'}, {'name': 'Red 300', 'key': '300', 'hex': '#e57373', 'rgb': 'rgb(229, 115, 115)', 'hsl': 'hsl(0, 69%, 67%)', 'text': '#000000'}, {'name': 'Red 400', 'key': '400', 'hex': '#ef5350', 'rgb': 'rgb(239, 83, 80)', 'hsl': 'hsl(1, 83%, 63%)', 'text': '#000000'}, {'name': 'Red 500', 'key': '500', 'hex': '#f44336', 'rgb': 'rgb(244, 67, 54)', 'hsl': 'hsl(4, 90%, 58%)', 'text': '#FFFFFF'}, {'name': 'Red 600', 'key': '600', 'hex': '#e53935', 'rgb': 'rgb(229, 57, 53)', 'hsl': 'hsl(1, 77%, 55%)', 'text': '#FFFFFF'}, {'name': 'Red 700', 'key': '700', 'hex': '#d32f2f', 'rgb': 'rgb(211, 47, 47)', 'hsl': 'hsl(0, 65%, 51%)', 'text': '#FFFFFF'}, {'name': 'Red 800', 'key': '800', 'hex': '#c62828', 'rgb': 'rgb(198, 40, 40)', 'hsl': 'hsl(0, 66%, 47%)', 'text': '#FFFFFF'}, {'name': 'Red 900', 'key': '900', 'hex': '#b71c1c', 'rgb': 'rgb(183, 28, 28)', 'hsl': 'hsl(0, 73%, 41%)', 'text': '#FFFFFF'}, {'name': 'Red a100', 'key': 'a100', 'hex': '#ff8a80', 'rgb': 'rgb(255, 138, 128)', 'hsl': 'hsl(5, 100%, 75%)', 'text': '#000000'}, {'name': 'Red a200', 'key': 'a200', 'hex': '#ff5252', 'rgb': 'rgb(255, 82, 82)', 'hsl': 'hsl(0, 100%, 66%)', 'text': '#000000'}, {'name': 'Red a400', 'key': 'a400', 'hex': '#ff1744', 'rgb': 'rgb(255, 23, 68)', 'hsl': 'hsl(348, 100%, 55%)', 'text': '#FFFFFF'}, {'name': 'Red a700', 'key': 'a700', 'hex': '#d50000', 'rgb': 'rgb(213, 0, 0)', 'hsl': 'hsl(0, 100%, 42%)', 'text': '#FFFFFF'}]}, {'name': 'Pinks', 'key': 'pink', 'swatches': [{'name': 'Pink 50', 'key': '50', 'hex': '#fce4ec', 'rgb': 'rgb(252, 228, 236)', 'hsl': 'hsl(340, 80%, 94%)', 'text': '#000000'}, {'name': 'Pink 100', 'key': '100', 'hex': '#f8bbd0', 'rgb': 'rgb(248, 187, 208)', 'hsl': 'hsl(339, 81%, 85%)', 'text': '#000000'}, {'name': 'Pink 200', 'key': '200', 'hex': '#f48fb1', 'rgb': 'rgb(244, 143, 177)', 'hsl': 'hsl(340, 82%, 76%)', 'text': '#000000'}, {'name': 'Pink 300', 'key': '300', 'hex': '#f06292', 'rgb': 'rgb(240, 98, 146)', 'hsl': 'hsl(340, 83%, 66%)', 'text': '#000000'}, {'name': 'Pink 400', 'key': '400', 'hex': '#ec407a', 'rgb': 'rgb(236, 64, 122)', 'hsl': 'hsl(340, 82%, 59%)', 'text': '#000000'}, {'name': 'Pink 500', 'key': '500', 'hex': '#e91e63', 'rgb': 'rgb(233, 30, 99)', 'hsl': 'hsl(340, 82%, 52%)', 'text': '#FFFFFF'}, {'name': 'Pink 600', 'key': '600', 'hex': '#d81b60', 'rgb': 'rgb(216, 27, 96)', 'hsl': 'hsl(338, 78%, 48%)', 'text': '#FFFFFF'}, {'name': 'Pink 700', 'key': '700', 'hex': '#c2185b', 'rgb': 'rgb(194, 24, 91)', 'hsl': 'hsl(336, 78%, 43%)', 'text': '#FFFFFF'}, {'name': 'Pink 800', 'key': '800', 'hex': '#ad1457', 'rgb': 'rgb(173, 20, 87)', 'hsl': 'hsl(334, 79%, 38%)', 'text': '#FFFFFF'}, {'name': 'Pink 900', 'key': '900', 'hex': '#880e4f', 'rgb': 'rgb(136, 14, 79)', 'hsl': 'hsl(328, 81%, 29%)', 'text': '#FFFFFF'}, {'name': 'Pink a100', 'key': 'a100', 'hex': '#ff80ab', 'rgb': 'rgb(255, 128, 171)', 'hsl': 'hsl(340, 100%, 75%)', 'text': '#000000'}, {'name': 'Pink a200', 'key': 'a200', 'hex': '#ff4081', 'rgb': 'rgb(255, 64, 129)', 'hsl': 'hsl(340, 100%, 63%)', 'text': '#000000'}, {'name': 'Pink a400', 'key': 'a400', 'hex': '#f50057', 'rgb': 'rgb(245, 0, 87)', 'hsl': 'hsl(339, 100%, 48%)', 'text': '#FFFFFF'}, {'name': 'Pink a700', 'key': 'a700', 'hex': '#c51162', 'rgb': 'rgb(197, 17, 98)', 'hsl': 'hsl(333, 84%, 42%)', 'text': '#FFFFFF'}]}, {'name': 'Purples', 'key': 'purple', 'swatches': [{'name': 'Purple 50', 'key': '50', 'hex': '#f3e5f5', 'rgb': 'rgb(243, 229, 245)', 'hsl': 'hsl(292, 44%, 93%)', 'text': '#000000'}, {'name': 'Purple 100', 'key': '100', 'hex': '#e1bee7', 'rgb': 'rgb(225, 190, 231)', 'hsl': 'hsl(291, 46%, 83%)', 'text': '#000000'}, {'name': 'Purple 200', 'key': '200', 'hex': '#ce93d8', 'rgb': 'rgb(206, 147, 216)', 'hsl': 'hsl(291, 47%, 71%)', 'text': '#000000'}, {'name': 'Purple 300', 'key': '300', 'hex': '#ba68c8', 'rgb': 'rgb(186, 104, 200)', 'hsl': 'hsl(291, 47%, 60%)', 'text': '#000000'}, {'name': 'Purple 400', 'key': '400', 'hex': '#ab47bc', 'rgb': 'rgb(171, 71, 188)', 'hsl': 'hsl(291, 47%, 51%)', 'text': '#000000'}, {'name': 'Purple 500', 'key': '500', 'hex': '#9c27b0', 'rgb': 'rgb(156, 39, 176)', 'hsl': 'hsl(291, 64%, 42%)', 'text': '#FFFFFF'}, {'name': 'Purple 600', 'key': '600', 'hex': '#8e24aa', 'rgb': 'rgb(142, 36, 170)', 'hsl': 'hsl(287, 65%, 40%)', 'text': '#FFFFFF'}, {'name': 'Purple 700', 'key': '700', 'hex': '#7b1fa2', 'rgb': 'rgb(123, 31, 162)', 'hsl': 'hsl(282, 68%, 38%)', 'text': '#FFFFFF'}, {'name': 'Purple 800', 'key': '800', 'hex': '#6a1b9a', 'rgb': 'rgb(106, 27, 154)', 'hsl': 'hsl(277, 70%, 35%)', 'text': '#FFFFFF'}, {'name': 'Purple 900', 'key': '900', 'hex': '#4a148c', 'rgb': 'rgb(74, 20, 140)', 'hsl': 'hsl(267, 75%, 31%)', 'text': '#FFFFFF'}, {'name': 'Purple a100', 'key': 'a100', 'hex': '#ea80fc', 'rgb': 'rgb(234, 128, 252)', 'hsl': 'hsl(291, 95%, 75%)', 'text': '#000000'}, {'name': 'Purple a200', 'key': 'a200', 'hex': '#e040fb', 'rgb': 'rgb(224, 64, 251)', 'hsl': 'hsl(291, 96%, 62%)', 'text': '#000000'}, {'name': 'Purple a400', 'key': 'a400', 'hex': '#d500f9', 'rgb': 'rgb(213, 0, 249)', 'hsl': 'hsl(291, 100%, 49%)', 'text': '#000000'}, {'name': 'Purple a700', 'key': 'a700', 'hex': '#aa00ff', 'rgb': 'rgb(170, 0, 255)', 'hsl': 'hsl(280, 100%, 50%)', 'text': '#FFFFFF'}]}, {'name': 'Deep Purples', 'key': 'deep-purple', 'swatches': [{'name': 'Deep Purple 50', 'key': '50', 'hex': '#ede7f6', 'rgb': 'rgb(237, 231, 246)', 'hsl': 'hsl(264, 45%, 94%)', 'text': '#000000'}, {'name': 'Deep Purple 100', 'key': '100', 'hex': '#d1c4e9', 'rgb': 'rgb(209, 196, 233)', 'hsl': 'hsl(261, 46%, 84%)', 'text': '#000000'}, {'name': 'Deep Purple 200', 'key': '200', 'hex': '#b39ddb', 'rgb': 'rgb(179, 157, 219)', 'hsl': 'hsl(261, 46%, 74%)', 'text': '#000000'}, {'name': 'Deep Purple 300', 'key': '300', 'hex': '#9575cd', 'rgb': 'rgb(149, 117, 205)', 'hsl': 'hsl(262, 47%, 63%)', 'text': '#000000'}, {'name': 'Deep Purple 400', 'key': '400', 'hex': '#7e57c2', 'rgb': 'rgb(126, 87, 194)', 'hsl': 'hsl(262, 47%, 55%)', 'text': '#000000'}, {'name': 'Deep Purple 500', 'key': '500', 'hex': '#673ab7', 'rgb': 'rgb(103, 58, 183)', 'hsl': 'hsl(262, 52%, 47%)', 'text': '#FFFFFF'}, {'name': 'Deep Purple 600', 'key': '600', 'hex': '#5e35b1', 'rgb': 'rgb(94, 53, 177)', 'hsl': 'hsl(260, 54%, 45%)', 'text': '#FFFFFF'}, {'name': 'Deep Purple 700', 'key': '700', 'hex': '#512da8', 'rgb': 'rgb(81, 45, 168)', 'hsl': 'hsl(258, 58%, 42%)', 'text': '#FFFFFF'}, {'name': 'Deep Purple 800', 'key': '800', 'hex': '#4527a0', 'rgb': 'rgb(69, 39, 160)', 'hsl': 'hsl(255, 61%, 39%)', 'text': '#FFFFFF'}, {'name': 'Deep Purple 900', 'key': '900', 'hex': '#311b92', 'rgb': 'rgb(49, 27, 146)', 'hsl': 'hsl(251, 69%, 34%)', 'text': '#FFFFFF'}, {'name': 'Deep Purple a100', 'key': 'a100', 'hex': '#b388ff', 'rgb': 'rgb(179, 136, 255)', 'hsl': 'hsl(262, 100%, 77%)', 'text': '#000000'}, {'name': 'Deep Purple a200', 'key': 'a200', 'hex': '#7c4dff', 'rgb': 'rgb(124, 77, 255)', 'hsl': 'hsl(256, 100%, 65%)', 'text': '#000000'}, {'name': 'Deep Purple a400', 'key': 'a400', 'hex': '#651fff', 'rgb': 'rgb(101, 31, 255)', 'hsl': 'hsl(259, 100%, 56%)', 'text': '#FFFFFF'}, {'name': 'Deep Purple a700', 'key': 'a700', 'hex': '#6200ea', 'rgb': 'rgb(98, 0, 234)', 'hsl': 'hsl(265, 100%, 46%)', 'text': '#FFFFFF'}]}, {'name': 'Indigoes', 'key': 'indigo', 'swatches': [{'name': 'Indigo 50', 'key': '50', 'hex': '#e8eaf6', 'rgb': 'rgb(232, 234, 246)', 'hsl': 'hsl(231, 44%, 94%)', 'text': '#000000'}, {'name': 'Indigo 100', 'key': '100', 'hex': '#c5cae9', 'rgb': 'rgb(197, 202, 233)', 'hsl': 'hsl(232, 45%, 84%)', 'text': '#000000'}, {'name': 'Indigo 200', 'key': '200', 'hex': '#9fa8da', 'rgb': 'rgb(159, 168, 218)', 'hsl': 'hsl(231, 44%, 74%)', 'text': '#000000'}, {'name': 'Indigo 300', 'key': '300', 'hex': '#7986cb', 'rgb': 'rgb(121, 134, 203)', 'hsl': 'hsl(230, 44%, 64%)', 'text': '#000000'}, {'name': 'Indigo 400', 'key': '400', 'hex': '#5c6bc0', 'rgb': 'rgb(92, 107, 192)', 'hsl': 'hsl(231, 44%, 56%)', 'text': '#000000'}, {'name': 'Indigo 500', 'key': '500', 'hex': '#3f51b5', 'rgb': 'rgb(63, 81, 181)', 'hsl': 'hsl(231, 48%, 48%)', 'text': '#FFFFFF'}, {'name': 'Indigo 600', 'key': '600', 'hex': '#3949ab', 'rgb': 'rgb(57, 73, 171)', 'hsl': 'hsl(232, 50%, 45%)', 'text': '#FFFFFF'}, {'name': 'Indigo 700', 'key': '700', 'hex': '#303f9f', 'rgb': 'rgb(48, 63, 159)', 'hsl': 'hsl(232, 54%, 41%)', 'text': '#FFFFFF'}, {'name': 'Indigo 800', 'key': '800', 'hex': '#283593', 'rgb': 'rgb(40, 53, 147)', 'hsl': 'hsl(233, 57%, 37%)', 'text': '#FFFFFF'}, {'name': 'Indigo 900', 'key': '900', 'hex': '#1a237e', 'rgb': 'rgb(26, 35, 126)', 'hsl': 'hsl(235, 66%, 30%)', 'text': '#FFFFFF'}, {'name': 'Indigo a100', 'key': 'a100', 'hex': '#8c9eff', 'rgb': 'rgb(140, 158, 255)', 'hsl': 'hsl(231, 100%, 77%)', 'text': '#000000'}, {'name': 'Indigo a200', 'key': 'a200', 'hex': '#536dfe', 'rgb': 'rgb(83, 109, 254)', 'hsl': 'hsl(231, 99%, 66%)', 'text': '#000000'}, {'name': 'Indigo a400', 'key': 'a400', 'hex': '#3d5afe', 'rgb': 'rgb(61, 90, 254)', 'hsl': 'hsl(231, 99%, 62%)', 'text': '#FFFFFF'}, {'name': 'Indigo a700', 'key': 'a700', 'hex': '#304ffe', 'rgb': 'rgb(48, 79, 254)', 'hsl': 'hsl(231, 99%, 59%)', 'text': '#FFFFFF'}]}, {'name': 'Blues', 'key': 'blue', 'swatches': [{'name': 'Blue 50', 'key': '50', 'hex': '#e3f2fd', 'rgb': 'rgb(227, 242, 253)', 'hsl': 'hsl(205, 87%, 94%)', 'text': '#000000'}, {'name': 'Blue 100', 'key': '100', 'hex': '#bbdefb', 'rgb': 'rgb(187, 222, 251)', 'hsl': 'hsl(207, 89%, 86%)', 'text': '#000000'}, {'name': 'Blue 200', 'key': '200', 'hex': '#90caf9', 'rgb': 'rgb(144, 202, 249)', 'hsl': 'hsl(207, 90%, 77%)', 'text': '#000000'}, {'name': 'Blue 300', 'key': '300', 'hex': '#64b5f6', 'rgb': 'rgb(100, 181, 246)', 'hsl': 'hsl(207, 89%, 68%)', 'text': '#000000'}, {'name': 'Blue 400', 'key': '400', 'hex': '#42a5f5', 'rgb': 'rgb(66, 165, 245)', 'hsl': 'hsl(207, 90%, 61%)', 'text': '#000000'}, {'name': 'Blue 500', 'key': '500', 'hex': '#2196f3', 'rgb': 'rgb(33, 150, 243)', 'hsl': 'hsl(207, 90%, 54%)', 'text': '#FFFFFF'}, {'name': 'Blue 600', 'key': '600', 'hex': '#1e88e5', 'rgb': 'rgb(30, 136, 229)', 'hsl': 'hsl(208, 79%, 51%)', 'text': '#FFFFFF'}, {'name': 'Blue 700', 'key': '700', 'hex': '#1976d2', 'rgb': 'rgb(25, 118, 210)', 'hsl': 'hsl(210, 79%, 46%)', 'text': '#FFFFFF'}, {'name': 'Blue 800', 'key': '800', 'hex': '#1565c0', 'rgb': 'rgb(21, 101, 192)', 'hsl': 'hsl(212, 80%, 42%)', 'text': '#FFFFFF'}, {'name': 'Blue 900', 'key': '900', 'hex': '#0d47a1', 'rgb': 'rgb(13, 71, 161)', 'hsl': 'hsl(216, 85%, 34%)', 'text': '#FFFFFF'}, {'name': 'Blue a100', 'key': 'a100', 'hex': '#82b1ff', 'rgb': 'rgb(130, 177, 255)', 'hsl': 'hsl(217, 100%, 75%)', 'text': '#000000'}, {'name': 'Blue a200', 'key': 'a200', 'hex': '#448aff', 'rgb': 'rgb(68, 138, 255)', 'hsl': 'hsl(218, 100%, 63%)', 'text': '#000000'}, {'name': 'Blue a400', 'key': 'a400', 'hex': '#2979ff', 'rgb': 'rgb(41, 121, 255)', 'hsl': 'hsl(218, 100%, 58%)', 'text': '#FFFFFF'}, {'name': 'Blue a700', 'key': 'a700', 'hex': '#2962ff', 'rgb': 'rgb(41, 98, 255)', 'hsl': 'hsl(224, 100%, 58%)', 'text': '#FFFFFF'}]}, {'name': 'Light Blues', 'key': 'light-blue', 'swatches': [{'name': 'Light Blue 50', 'key': '50', 'hex': '#e1f5fe', 'rgb': 'rgb(225, 245, 254)', 'hsl': 'hsl(199, 94%, 94%)', 'text': '#000000'}, {'name': 'Light Blue 100', 'key': '100', 'hex': '#b3e5fc', 'rgb': 'rgb(179, 229, 252)', 'hsl': 'hsl(199, 92%, 85%)', 'text': '#000000'}, {'name': 'Light Blue 200', 'key': '200', 'hex': '#81d4fa', 'rgb': 'rgb(129, 212, 250)', 'hsl': 'hsl(199, 92%, 74%)', 'text': '#000000'}, {'name': 'Light Blue 300', 'key': '300', 'hex': '#4fc3f7', 'rgb': 'rgb(79, 195, 247)', 'hsl': 'hsl(199, 91%, 64%)', 'text': '#000000'}, {'name': 'Light Blue 400', 'key': '400', 'hex': '#29b6f6', 'rgb': 'rgb(41, 182, 246)', 'hsl': 'hsl(199, 92%, 56%)', 'text': '#000000'}, {'name': 'Light Blue 500', 'key': '500', 'hex': '#03a9f4', 'rgb': 'rgb(3, 169, 244)', 'hsl': 'hsl(199, 98%, 48%)', 'text': '#FFFFFF'}, {'name': 'Light Blue 600', 'key': '600', 'hex': '#039be5', 'rgb': 'rgb(3, 155, 229)', 'hsl': 'hsl(200, 97%, 45%)', 'text': '#FFFFFF'}, {'name': 'Light Blue 700', 'key': '700', 'hex': '#0288d1', 'rgb': 'rgb(2, 136, 209)', 'hsl': 'hsl(201, 98%, 41%)', 'text': '#FFFFFF'}, {'name': 'Light Blue 800', 'key': '800', 'hex': '#0277bd', 'rgb': 'rgb(2, 119, 189)', 'hsl': 'hsl(202, 98%, 37%)', 'text': '#FFFFFF'}, {'name': 'Light Blue 900', 'key': '900', 'hex': '#01579b', 'rgb': 'rgb(1, 87, 155)', 'hsl': 'hsl(206, 99%, 31%)', 'text': '#FFFFFF'}, {'name': 'Light Blue a100', 'key': 'a100', 'hex': '#80d8ff', 'rgb': 'rgb(128, 216, 255)', 'hsl': 'hsl(198, 100%, 75%)', 'text': '#000000'}, {'name': 'Light Blue a200', 'key': 'a200', 'hex': '#40c4ff', 'rgb': 'rgb(64, 196, 255)', 'hsl': 'hsl(199, 100%, 63%)', 'text': '#000000'}, {'name': 'Light Blue a400', 'key': 'a400', 'hex': '#00b0ff', 'rgb': 'rgb(0, 176, 255)', 'hsl': 'hsl(199, 100%, 50%)', 'text': '#000000'}, {'name': 'Light Blue a700', 'key': 'a700', 'hex': '#0091ea', 'rgb': 'rgb(0, 145, 234)', 'hsl': 'hsl(203, 100%, 46%)', 'text': '#FFFFFF'}]}, {'name': 'Cyans', 'key': 'cyan', 'swatches': [{'name': 'Cyan 50', 'key': '50', 'hex': '#e0f7fa', 'rgb': 'rgb(224, 247, 250)', 'hsl': 'hsl(187, 72%, 93%)', 'text': '#000000'}, {'name': 'Cyan 100', 'key': '100', 'hex': '#b2ebf2', 'rgb': 'rgb(178, 235, 242)', 'hsl': 'hsl(187, 71%, 82%)', 'text': '#000000'}, {'name': 'Cyan 200', 'key': '200', 'hex': '#80deea', 'rgb': 'rgb(128, 222, 234)', 'hsl': 'hsl(187, 72%, 71%)', 'text': '#000000'}, {'name': 'Cyan 300', 'key': '300', 'hex': '#4dd0e1', 'rgb': 'rgb(77, 208, 225)', 'hsl': 'hsl(187, 71%, 59%)', 'text': '#000000'}, {'name': 'Cyan 400', 'key': '400', 'hex': '#26c6da', 'rgb': 'rgb(38, 198, 218)', 'hsl': 'hsl(187, 71%, 50%)', 'text': '#000000'}, {'name': 'Cyan 500', 'key': '500', 'hex': '#00bcd4', 'rgb': 'rgb(0, 188, 212)', 'hsl': 'hsl(187, 100%, 42%)', 'text': '#FFFFFF'}, {'name': 'Cyan 600', 'key': '600', 'hex': '#00acc1', 'rgb': 'rgb(0, 172, 193)', 'hsl': 'hsl(187, 100%, 38%)', 'text': '#FFFFFF'}, {'name': 'Cyan 700', 'key': '700', 'hex': '#0097a7', 'rgb': 'rgb(0, 151, 167)', 'hsl': 'hsl(186, 100%, 33%)', 'text': '#FFFFFF'}, {'name': 'Cyan 800', 'key': '800', 'hex': '#00838f', 'rgb': 'rgb(0, 131, 143)', 'hsl': 'hsl(185, 100%, 28%)', 'text': '#FFFFFF'}, {'name': 'Cyan 900', 'key': '900', 'hex': '#006064', 'rgb': 'rgb(0, 96, 100)', 'hsl': 'hsl(182, 100%, 20%)', 'text': '#FFFFFF'}, {'name': 'Cyan a100', 'key': 'a100', 'hex': '#84ffff', 'rgb': 'rgb(132, 255, 255)', 'hsl': 'hsl(180, 100%, 76%)', 'text': '#000000'}, {'name': 'Cyan a200', 'key': 'a200', 'hex': '#18ffff', 'rgb': 'rgb(24, 255, 255)', 'hsl': 'hsl(180, 100%, 55%)', 'text': '#000000'}, {'name': 'Cyan a400', 'key': 'a400', 'hex': '#00e5ff', 'rgb': 'rgb(0, 229, 255)', 'hsl': 'hsl(186, 100%, 50%)', 'text': '#000000'}, {'name': 'Cyan a700', 'key': 'a700', 'hex': '#00b8d4', 'rgb': 'rgb(0, 184, 212)', 'hsl': 'hsl(188, 100%, 42%)', 'text': '#FFFFFF'}]}, {'name': 'Teals', 'swatches': [{'name': 'Teal 50', 'key': '50', 'hex': '#e0f2f1', 'rgb': 'rgb(224, 242, 241)', 'hsl': 'hsl(177, 41%, 91%)', 'text': '#000000'}, {'name': 'Teal 100', 'key': '100', 'hex': '#b2dfdb', 'rgb': 'rgb(178, 223, 219)', 'hsl': 'hsl(175, 41%, 79%)', 'text': '#000000'}, {'name': 'Teal 200', 'key': '200', 'hex': '#80cbc4', 'rgb': 'rgb(128, 203, 196)', 'hsl': 'hsl(174, 42%, 65%)', 'text': '#000000'}, {'name': 'Teal 300', 'key': '300', 'hex': '#4db6ac', 'rgb': 'rgb(77, 182, 172)', 'hsl': 'hsl(174, 42%, 51%)', 'text': '#000000'}, {'name': 'Teal 400', 'key': '400', 'hex': '#26a69a', 'rgb': 'rgb(38, 166, 154)', 'hsl': 'hsl(174, 63%, 40%)', 'text': '#000000'}, {'name': 'Teal 500', 'key': '500', 'hex': '#009688', 'rgb': 'rgb(0, 150, 136)', 'hsl': 'hsl(174, 100%, 29%)', 'text': '#FFFFFF'}, {'name': 'Teal 600', 'key': '600', 'hex': '#00897b', 'rgb': 'rgb(0, 137, 123)', 'hsl': 'hsl(174, 100%, 27%)', 'text': '#FFFFFF'}, {'name': 'Teal 700', 'key': '700', 'hex': '#00796b', 'rgb': 'rgb(0, 121, 107)', 'hsl': 'hsl(173, 100%, 24%)', 'text': '#FFFFFF'}, {'name': 'Teal 800', 'key': '800', 'hex': '#00695c', 'rgb': 'rgb(0, 105, 92)', 'hsl': 'hsl(173, 100%, 21%)', 'text': '#FFFFFF'}, {'name': 'Teal 900', 'key': '900', 'hex': '#004d40', 'rgb': 'rgb(0, 77, 64)', 'hsl': 'hsl(170, 100%, 15%)', 'text': '#FFFFFF'}, {'name': 'Teal a100', 'key': 'a100', 'hex': '#a7ffeb', 'rgb': 'rgb(167, 255, 235)', 'hsl': 'hsl(166, 100%, 83%)', 'text': '#000000'}, {'name': 'Teal a200', 'key': 'a200', 'hex': '#64ffda', 'rgb': 'rgb(100, 255, 218)', 'hsl': 'hsl(166, 100%, 70%)', 'text': '#000000'}, {'name': 'Teal a400', 'key': 'a400', 'hex': '#1de9b6', 'rgb': 'rgb(29, 233, 182)', 'hsl': 'hsl(165, 82%, 51%)', 'text': '#000000'}, {'name': 'Teal a700', 'key': 'a700', 'hex': '#00bfa5', 'rgb': 'rgb(0, 191, 165)', 'hsl': 'hsl(172, 100%, 37%)', 'text': '#FFFFFF'}]}, {'name': 'Greens', 'key': 'green', 'swatches': [{'name': 'Green 50', 'key': '50', 'hex': '#e8f5e9', 'rgb': 'rgb(232, 245, 233)', 'hsl': 'hsl(125, 39%, 94%)', 'text': '#000000'}, {'name': 'Green 100', 'key': '100', 'hex': '#c8e6c9', 'rgb': 'rgb(200, 230, 201)', 'hsl': 'hsl(122, 37%, 84%)', 'text': '#000000'}, {'name': 'Green 200', 'key': '200', 'hex': '#a5d6a7', 'rgb': 'rgb(165, 214, 167)', 'hsl': 'hsl(122, 37%, 74%)', 'text': '#000000'}, {'name': 'Green 300', 'key': '300', 'hex': '#81c784', 'rgb': 'rgb(129, 199, 132)', 'hsl': 'hsl(123, 38%, 64%)', 'text': '#000000'}, {'name': 'Green 400', 'key': '400', 'hex': '#66bb6a', 'rgb': 'rgb(102, 187, 106)', 'hsl': 'hsl(123, 38%, 57%)', 'text': '#000000'}, {'name': 'Green 500', 'key': '500', 'hex': '#4caf50', 'rgb': 'rgb(76, 175, 80)', 'hsl': 'hsl(122, 39%, 49%)', 'text': '#FFFFFF'}, {'name': 'Green 600', 'key': '600', 'hex': '#43a047', 'rgb': 'rgb(67, 160, 71)', 'hsl': 'hsl(123, 41%, 45%)', 'text': '#FFFFFF'}, {'name': 'Green 700', 'key': '700', 'hex': '#388e3c', 'rgb': 'rgb(56, 142, 60)', 'hsl': 'hsl(123, 43%, 39%)', 'text': '#FFFFFF'}, {'name': 'Green 800', 'key': '800', 'hex': '#2e7d32', 'rgb': 'rgb(46, 125, 50)', 'hsl': 'hsl(123, 46%, 34%)', 'text': '#FFFFFF'}, {'name': 'Green 900', 'key': '900', 'hex': '#1b5e20', 'rgb': 'rgb(27, 94, 32)', 'hsl': 'hsl(124, 55%, 24%)', 'text': '#FFFFFF'}, {'name': 'Green a100', 'key': 'a100', 'hex': '#b9f6ca', 'rgb': 'rgb(185, 246, 202)', 'hsl': 'hsl(137, 77%, 85%)', 'text': '#000000'}, {'name': 'Green a200', 'key': 'a200', 'hex': '#69f0ae', 'rgb': 'rgb(105, 240, 174)', 'hsl': 'hsl(151, 82%, 68%)', 'text': '#000000'}, {'name': 'Green a400', 'key': 'a400', 'hex': '#00e676', 'rgb': 'rgb(0, 230, 118)', 'hsl': 'hsl(151, 100%, 45%)', 'text': '#000000'}, {'name': 'Green a700', 'key': 'a700', 'hex': '#00c853', 'rgb': 'rgb(0, 200, 83)', 'hsl': 'hsl(145, 100%, 39%)', 'text': '#FFFFFF'}]}, {'name': 'Light Greens', 'key': 'light-green', 'swatches': [{'name': 'Light Green 50', 'key': '50', 'hex': '#f1f8e9', 'rgb': 'rgb(241, 248, 233)', 'hsl': 'hsl(88, 52%, 94%)', 'text': '#000000'}, {'name': 'Light Green 100', 'key': '100', 'hex': '#dcedc8', 'rgb': 'rgb(220, 237, 200)', 'hsl': 'hsl(88, 51%, 86%)', 'text': '#000000'}, {'name': 'Light Green 200', 'key': '200', 'hex': '#c5e1a5', 'rgb': 'rgb(197, 225, 165)', 'hsl': 'hsl(88, 50%, 76%)', 'text': '#000000'}, {'name': 'Light Green 300', 'key': '300', 'hex': '#aed581', 'rgb': 'rgb(174, 213, 129)', 'hsl': 'hsl(88, 50%, 67%)', 'text': '#000000'}, {'name': 'Light Green 400', 'key': '400', 'hex': '#9ccc65', 'rgb': 'rgb(156, 204, 101)', 'hsl': 'hsl(88, 50%, 60%)', 'text': '#000000'}, {'name': 'Light Green 500', 'key': '500', 'hex': '#8bc34a', 'rgb': 'rgb(139, 195, 74)', 'hsl': 'hsl(88, 50%, 53%)', 'text': '#FFFFFF'}, {'name': 'Light Green 600', 'key': '600', 'hex': '#7cb342', 'rgb': 'rgb(124, 179, 66)', 'hsl': 'hsl(89, 46%, 48%)', 'text': '#FFFFFF'}, {'name': 'Light Green 700', 'key': '700', 'hex': '#689f38', 'rgb': 'rgb(104, 159, 56)', 'hsl': 'hsl(92, 48%, 42%)', 'text': '#FFFFFF'}, {'name': 'Light Green 800', 'key': '800', 'hex': '#558b2f', 'rgb': 'rgb(85, 139, 47)', 'hsl': 'hsl(95, 49%, 36%)', 'text': '#FFFFFF'}, {'name': 'Light Green 900', 'key': '900', 'hex': '#33691e', 'rgb': 'rgb(51, 105, 30)', 'hsl': 'hsl(103, 56%, 26%)', 'text': '#FFFFFF'}, {'name': 'Light Green a100', 'key': 'a100', 'hex': '#ccff90', 'rgb': 'rgb(204, 255, 144)', 'hsl': 'hsl(88, 100%, 78%)', 'text': '#000000'}, {'name': 'Light Green a200', 'key': 'a200', 'hex': '#b2ff59', 'rgb': 'rgb(178, 255, 89)', 'hsl': 'hsl(88, 100%, 67%)', 'text': '#000000'}, {'name': 'Light Green a400', 'key': 'a400', 'hex': '#76ff03', 'rgb': 'rgb(118, 255, 3)', 'hsl': 'hsl(93, 100%, 51%)', 'text': '#000000'}, {'name': 'Light Green a700', 'key': 'a700', 'hex': '#64dd17', 'rgb': 'rgb(100, 221, 23)', 'hsl': 'hsl(97, 81%, 48%)', 'text': '#FFFFFF'}]}, {'name': 'Limes', 'key': 'lime', 'swatches': [{'name': 'Lime 50', 'key': '50', 'hex': '#f9fbe7', 'rgb': 'rgb(249, 251, 231)', 'hsl': 'hsl(66, 71%, 95%)', 'text': '#000000'}, {'name': 'Lime 100', 'key': '100', 'hex': '#f0f4c3', 'rgb': 'rgb(240, 244, 195)', 'hsl': 'hsl(65, 69%, 86%)', 'text': '#000000'}, {'name': 'Lime 200', 'key': '200', 'hex': '#e6ee9c', 'rgb': 'rgb(230, 238, 156)', 'hsl': 'hsl(66, 71%, 77%)', 'text': '#000000'}, {'name': 'Lime 300', 'key': '300', 'hex': '#dce775', 'rgb': 'rgb(220, 231, 117)', 'hsl': 'hsl(66, 70%, 68%)', 'text': '#000000'}, {'name': 'Lime 400', 'key': '400', 'hex': '#d4e157', 'rgb': 'rgb(212, 225, 87)', 'hsl': 'hsl(66, 70%, 61%)', 'text': '#000000'}, {'name': 'Lime 500', 'key': '500', 'hex': '#cddc39', 'rgb': 'rgb(205, 220, 57)', 'hsl': 'hsl(66, 70%, 54%)', 'text': '#000000'}, {'name': 'Lime 600', 'key': '600', 'hex': '#c0ca33', 'rgb': 'rgb(192, 202, 51)', 'hsl': 'hsl(64, 60%, 50%)', 'text': '#FFFFFF'}, {'name': 'Lime 700', 'key': '700', 'hex': '#afb42b', 'rgb': 'rgb(175, 180, 43)', 'hsl': 'hsl(62, 61%, 44%)', 'text': '#FFFFFF'}, {'name': 'Lime 800', 'key': '800', 'hex': '#9e9d24', 'rgb': 'rgb(158, 157, 36)', 'hsl': 'hsl(60, 63%, 38%)', 'text': '#FFFFFF'}, {'name': 'Lime 900', 'key': '900', 'hex': '#827717', 'rgb': 'rgb(130, 119, 23)', 'hsl': 'hsl(54, 70%, 30%)', 'text': '#FFFFFF'}, {'name': 'Lime a100', 'key': 'a100', 'hex': '#f4ff81', 'rgb': 'rgb(244, 255, 129)', 'hsl': 'hsl(65, 100%, 75%)', 'text': '#000000'}, {'name': 'Lime a200', 'key': 'a200', 'hex': '#eeff41', 'rgb': 'rgb(238, 255, 65)', 'hsl': 'hsl(65, 100%, 63%)', 'text': '#000000'}, {'name': 'Lime a400', 'key': 'a400', 'hex': '#c6ff00', 'rgb': 'rgb(198, 255, 0)', 'hsl': 'hsl(73, 100%, 50%)', 'text': '#000000'}, {'name': 'Lime a700', 'key': 'a700', 'hex': '#aeea00', 'rgb': 'rgb(174, 234, 0)', 'hsl': 'hsl(75, 100%, 46%)', 'text': '#FFFFFF'}]}, {'name': 'Yellows', 'key': 'yellow', 'swatches': [{'name': 'Yellow 50', 'key': '50', 'hex': '#fffde7', 'rgb': 'rgb(255, 253, 231)', 'hsl': 'hsl(55, 100%, 95%)', 'text': '#000000'}, {'name': 'Yellow 100', 'key': '100', 'hex': '#fff9c4', 'rgb': 'rgb(255, 249, 196)', 'hsl': 'hsl(54, 100%, 88%)', 'text': '#000000'}, {'name': 'Yellow 200', 'key': '200', 'hex': '#fff59d', 'rgb': 'rgb(255, 245, 157)', 'hsl': 'hsl(54, 100%, 81%)', 'text': '#000000'}, {'name': 'Yellow 300', 'key': '300', 'hex': '#fff176', 'rgb': 'rgb(255, 241, 118)', 'hsl': 'hsl(54, 100%, 73%)', 'text': '#000000'}, {'name': 'Yellow 400', 'key': '400', 'hex': '#ffee58', 'rgb': 'rgb(255, 238, 88)', 'hsl': 'hsl(54, 100%, 67%)', 'text': '#000000'}, {'name': 'Yellow 500', 'key': '500', 'hex': '#ffeb3b', 'rgb': 'rgb(255, 235, 59)', 'hsl': 'hsl(54, 100%, 62%)', 'text': '#000000'}, {'name': 'Yellow 600', 'key': '600', 'hex': '#fdd835', 'rgb': 'rgb(253, 216, 53)', 'hsl': 'hsl(49, 98%, 60%)', 'text': '#000000'}, {'name': 'Yellow 700', 'key': '700', 'hex': '#fbc02d', 'rgb': 'rgb(251, 192, 45)', 'hsl': 'hsl(43, 96%, 58%)', 'text': '#000000'}, {'name': 'Yellow 800', 'key': '800', 'hex': '#f9a825', 'rgb': 'rgb(249, 168, 37)', 'hsl': 'hsl(37, 95%, 56%)', 'text': '#FFFFFF'}, {'name': 'Yellow 900', 'key': '900', 'hex': '#f57f17', 'rgb': 'rgb(245, 127, 23)', 'hsl': 'hsl(28, 92%, 53%)', 'text': '#FFFFFF'}, {'name': 'Yellow a100', 'key': 'a100', 'hex': '#ffff8d', 'rgb': 'rgb(255, 255, 141)', 'hsl': 'hsl(60, 100%, 78%)', 'text': '#000000'}, {'name': 'Yellow a200', 'key': 'a200', 'hex': '#ffff00', 'rgb': 'rgb(255, 255, 0)', 'hsl': 'hsl(60, 100%, 50%)', 'text': '#000000'}, {'name': 'Yellow a400', 'key': 'a400', 'hex': '#ffea00', 'rgb': 'rgb(255, 234, 0)', 'hsl': 'hsl(55, 100%, 50%)', 'text': '#000000'}, {'name': 'Yellow a700', 'key': 'a700', 'hex': '#ffd600', 'rgb': 'rgb(255, 214, 0)', 'hsl': 'hsl(50, 100%, 50%)', 'text': '#FFFFFF'}]}, {'name': 'Ambers', 'key': 'amber', 'swatches': [{'name': 'Amber 50', 'key': '50', 'hex': '#fff8e1', 'rgb': 'rgb(255, 248, 225)', 'hsl': 'hsl(46, 100%, 94%)', 'text': '#000000'}, {'name': 'Amber 100', 'key': '100', 'hex': '#ffecb3', 'rgb': 'rgb(255, 236, 179)', 'hsl': 'hsl(45, 100%, 85%)', 'text': '#000000'}, {'name': 'Amber 200', 'key': '200', 'hex': '#ffe082', 'rgb': 'rgb(255, 224, 130)', 'hsl': 'hsl(45, 100%, 75%)', 'text': '#000000'}, {'name': 'Amber 300', 'key': '300', 'hex': '#ffd54f', 'rgb': 'rgb(255, 213, 79)', 'hsl': 'hsl(46, 100%, 65%)', 'text': '#000000'}, {'name': 'Amber 400', 'key': '400', 'hex': '#ffca28', 'rgb': 'rgb(255, 202, 40)', 'hsl': 'hsl(45, 100%, 58%)', 'text': '#000000'}, {'name': 'Amber 500', 'key': '500', 'hex': '#ffc107', 'rgb': 'rgb(255, 193, 7)', 'hsl': 'hsl(45, 100%, 51%)', 'text': '#000000'}, {'name': 'Amber 600', 'key': '600', 'hex': '#ffb300', 'rgb': 'rgb(255, 179, 0)', 'hsl': 'hsl(42, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Amber 700', 'key': '700', 'hex': '#ffa000', 'rgb': 'rgb(255, 160, 0)', 'hsl': 'hsl(38, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Amber 800', 'key': '800', 'hex': '#ff8f00', 'rgb': 'rgb(255, 143, 0)', 'hsl': 'hsl(34, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Amber 900', 'key': '900', 'hex': '#ff6f00', 'rgb': 'rgb(255, 111, 0)', 'hsl': 'hsl(26, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Amber a100', 'key': 'a100', 'hex': '#ffe57f', 'rgb': 'rgb(255, 229, 127)', 'hsl': 'hsl(48, 100%, 75%)', 'text': '#000000'}, {'name': 'Amber a200', 'key': 'a200', 'hex': '#ffd740', 'rgb': 'rgb(255, 215, 64)', 'hsl': 'hsl(47, 100%, 63%)', 'text': '#000000'}, {'name': 'Amber a400', 'key': 'a400', 'hex': '#ffc400', 'rgb': 'rgb(255, 196, 0)', 'hsl': 'hsl(46, 100%, 50%)', 'text': '#000000'}, {'name': 'Amber a700', 'key': 'a700', 'hex': '#ffab00', 'rgb': 'rgb(255, 171, 0)', 'hsl': 'hsl(40, 100%, 50%)', 'text': '#FFFFFF'}]}, {'name': 'Oranges', 'key': 'orange', 'swatches': [{'name': 'Orange 50', 'key': '50', 'hex': '#fff3e0', 'rgb': 'rgb(255, 243, 224)', 'hsl': 'hsl(37, 100%, 94%)', 'text': '#000000'}, {'name': 'Orange 100', 'key': '100', 'hex': '#ffe0b2', 'rgb': 'rgb(255, 224, 178)', 'hsl': 'hsl(36, 100%, 85%)', 'text': '#000000'}, {'name': 'Orange 200', 'key': '200', 'hex': '#ffcc80', 'rgb': 'rgb(255, 204, 128)', 'hsl': 'hsl(36, 100%, 75%)', 'text': '#000000'}, {'name': 'Orange 300', 'key': '300', 'hex': '#ffb74d', 'rgb': 'rgb(255, 183, 77)', 'hsl': 'hsl(36, 100%, 65%)', 'text': '#000000'}, {'name': 'Orange 400', 'key': '400', 'hex': '#ffa726', 'rgb': 'rgb(255, 167, 38)', 'hsl': 'hsl(36, 100%, 57%)', 'text': '#000000'}, {'name': 'Orange 500', 'key': '500', 'hex': '#ff9800', 'rgb': 'rgb(255, 152, 0)', 'hsl': 'hsl(36, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Orange 600', 'key': '600', 'hex': '#fb8c00', 'rgb': 'rgb(251, 140, 0)', 'hsl': 'hsl(33, 100%, 49%)', 'text': '#FFFFFF'}, {'name': 'Orange 700', 'key': '700', 'hex': '#f57c00', 'rgb': 'rgb(245, 124, 0)', 'hsl': 'hsl(30, 100%, 48%)', 'text': '#FFFFFF'}, {'name': 'Orange 800', 'key': '800', 'hex': '#ef6c00', 'rgb': 'rgb(239, 108, 0)', 'hsl': 'hsl(27, 100%, 47%)', 'text': '#FFFFFF'}, {'name': 'Orange 900', 'key': '900', 'hex': '#e65100', 'rgb': 'rgb(230, 81, 0)', 'hsl': 'hsl(21, 100%, 45%)', 'text': '#FFFFFF'}, {'name': 'Orange a100', 'key': 'a100', 'hex': '#ffd180', 'rgb': 'rgb(255, 209, 128)', 'hsl': 'hsl(38, 100%, 75%)', 'text': '#000000'}, {'name': 'Orange a200', 'key': 'a200', 'hex': '#ffab40', 'rgb': 'rgb(255, 171, 64)', 'hsl': 'hsl(34, 100%, 63%)', 'text': '#000000'}, {'name': 'Orange a400', 'key': 'a400', 'hex': '#ff9100', 'rgb': 'rgb(255, 145, 0)', 'hsl': 'hsl(34, 100%, 50%)', 'text': '#000000'}, {'name': 'Orange a700', 'key': 'a700', 'hex': '#ff6d00', 'rgb': 'rgb(255, 109, 0)', 'hsl': 'hsl(26, 100%, 50%)', 'text': '#FFFFFF'}]}, {'name': 'Deep Oranges', 'key': 'deep-orange', 'swatches': [{'name': 'Deep Orange 50', 'key': '50', 'hex': '#fbe9e7', 'rgb': 'rgb(251, 233, 231)', 'hsl': 'hsl(6, 71%, 95%)', 'text': '#000000'}, {'name': 'Deep Orange 100', 'key': '100', 'hex': '#ffccbc', 'rgb': 'rgb(255, 204, 188)', 'hsl': 'hsl(14, 100%, 87%)', 'text': '#000000'}, {'name': 'Deep Orange 200', 'key': '200', 'hex': '#ffab91', 'rgb': 'rgb(255, 171, 145)', 'hsl': 'hsl(14, 100%, 78%)', 'text': '#000000'}, {'name': 'Deep Orange 300', 'key': '300', 'hex': '#ff8a65', 'rgb': 'rgb(255, 138, 101)', 'hsl': 'hsl(14, 100%, 70%)', 'text': '#000000'}, {'name': 'Deep Orange 400', 'key': '400', 'hex': '#ff7043', 'rgb': 'rgb(255, 112, 67)', 'hsl': 'hsl(14, 100%, 63%)', 'text': '#000000'}, {'name': 'Deep Orange 500', 'key': '500', 'hex': '#ff5722', 'rgb': 'rgb(255, 87, 34)', 'hsl': 'hsl(14, 100%, 57%)', 'text': '#FFFFFF'}, {'name': 'Deep Orange 600', 'key': '600', 'hex': '#f4511e', 'rgb': 'rgb(244, 81, 30)', 'hsl': 'hsl(14, 91%, 54%)', 'text': '#FFFFFF'}, {'name': 'Deep Orange 700', 'key': '700', 'hex': '#e64a19', 'rgb': 'rgb(230, 74, 25)', 'hsl': 'hsl(14, 80%, 50%)', 'text': '#FFFFFF'}, {'name': 'Deep Orange 800', 'key': '800', 'hex': '#d84315', 'rgb': 'rgb(216, 67, 21)', 'hsl': 'hsl(14, 82%, 46%)', 'text': '#FFFFFF'}, {'name': 'Deep Orange 900', 'key': '900', 'hex': '#bf360c', 'rgb': 'rgb(191, 54, 12)', 'hsl': 'hsl(14, 88%, 40%)', 'text': '#FFFFFF'}, {'name': 'Deep Orange a100', 'key': 'a100', 'hex': '#ff9e80', 'rgb': 'rgb(255, 158, 128)', 'hsl': 'hsl(14, 100%, 75%)', 'text': '#000000'}, {'name': 'Deep Orange a200', 'key': 'a200', 'hex': '#ff6e40', 'rgb': 'hsl(14, 100%, 63%)', 'hsl': '', 'text': '#000000'}, {'name': 'Deep Orange a400', 'key': 'a400', 'hex': '#ff3d00', 'rgb': 'rgb(255, 61, 0)', 'hsl': 'hsl(14, 100%, 50%)', 'text': '#FFFFFF'}, {'name': 'Deep Orange a700', 'key': 'a700', 'hex': '#dd2c00', 'rgb': 'rgb(221, 44, 0)', 'hsl': 'hsl(12, 100%, 43%)', 'text': '#FFFFFF'}]}, {'name': 'Browns', 'key': 'brown', 'swatches': [{'name': 'Brown 50', 'key': '50', 'hex': '#efebe9', 'rgb': 'rgb(239, 235, 233)', 'hsl': 'hsl(20, 16%, 93%)', 'text': '#000000'}, {'name': 'Brown 100', 'key': '100', 'hex': '#d7ccc8', 'rgb': 'rgb(215, 204, 200)', 'hsl': 'hsl(16, 16%, 81%)', 'text': '#000000'}, {'name': 'Brown 200', 'key': '200', 'hex': '#bcaaa4', 'rgb': 'rgb(188, 170, 164)', 'hsl': 'hsl(15, 15%, 69%)', 'text': '#000000'}, {'name': 'Brown 300', 'key': '300', 'hex': '#a1887f', 'rgb': 'rgb(161, 136, 127)', 'hsl': 'hsl(16, 15%, 56%)', 'text': '#000000'}, {'name': 'Brown 400', 'key': '400', 'hex': '#8d6e63', 'rgb': 'rgb(141, 110, 99)', 'hsl': 'hsl(16, 18%, 47%)', 'text': '#000000'}, {'name': 'Brown 500', 'key': '500', 'hex': '#795548', 'rgb': 'rgb(121, 85, 72)', 'hsl': 'hsl(16, 25%, 38%)', 'text': '#FFFFFF'}, {'name': 'Brown 600', 'key': '600', 'hex': '#6d4c41', 'rgb': 'rgb(109, 76, 65)', 'hsl': 'hsl(15, 25%, 34%)', 'text': '#FFFFFF'}, {'name': 'Brown 700', 'key': '700', 'hex': '#5d4037', 'rgb': 'rgb(93, 64, 55)', 'hsl': 'hsl(14, 26%, 29%)', 'text': '#FFFFFF'}, {'name': 'Brown 800', 'key': '800', 'hex': '#4e342e', 'rgb': 'rgb(78, 52, 46)', 'hsl': 'hsl(11, 26%, 24%)', 'text': '#FFFFFF'}, {'name': 'Brown 900', 'key': '900', 'hex': '#3e2723', 'rgb': 'rgb(62, 39, 35)', 'hsl': 'hsl(9, 28%, 19%)', 'text': '#FFFFFF'}]}, {'name': 'Grays', 'key': 'gray', 'swatches': [{'name': 'Gray 50', 'key': '50', 'hex': '#eceff1', 'rgb': 'rgb(236, 239, 241)', 'hsl': 'hsl(204, 15%, 94%)', 'text': '#000000'}, {'name': 'Gray 100', 'key': '100', 'hex': '#cfd8dc', 'rgb': 'rgb(207, 216, 220)', 'hsl': 'hsl(198, 16%, 84%)', 'text': '#000000'}, {'name': 'Gray 200', 'key': '200', 'hex': '#b0bec5', 'rgb': 'rgb(176, 190, 197)', 'hsl': 'hsl(200, 15%, 73%)', 'text': '#000000'}, {'name': 'Gray 300', 'key': '300', 'hex': '#90a4ae', 'rgb': 'rgb(144, 164, 174)', 'hsl': 'hsl(200, 16%, 62%)', 'text': '#000000'}, {'name': 'Gray 400', 'key': '400', 'hex': '#78909c', 'rgb': 'rgb(120, 144, 156)', 'hsl': 'hsl(200, 15%, 54%)', 'text': '#000000'}, {'name': 'Gray 500', 'key': '500', 'hex': '#607d8b', 'rgb': 'rgb(96, 125, 139)', 'hsl': 'hsl(200, 18%, 46%)', 'text': '#FFFFFF'}, {'name': 'Gray 600', 'key': '600', 'hex': '#546e7a', 'rgb': 'rgb(84, 110, 122)', 'hsl': 'hsl(199, 18%, 40%)', 'text': '#FFFFFF'}, {'name': 'Gray 700', 'key': '700', 'hex': '#455a64', 'rgb': 'rgb(69, 90, 100)', 'hsl': 'hsl(199, 18%, 33%)', 'text': '#FFFFFF'}, {'name': 'Gray 800', 'key': '800', 'hex': '#37474f', 'rgb': 'rgb(55, 71, 79)', 'hsl': 'hsl(200, 18%, 26%)', 'text': '#FFFFFF'}, {'name': 'Gray 900', 'key': '900', 'hex': '#263238', 'rgb': 'rgb(38, 50, 56)', 'hsl': 'hsl(200, 19%, 18%)', 'text': '#FFFFFF'}]}]}, {'name': 'Brand Colors', 'key': 'brand', 'groups': [{'name': '', 'key': '', 'swatches': [{'name': 'HTML', 'key': 'html', 'hex': '#E54A1f', 'rgb': 'rgb(229, 74, 31)', 'hsl': 'hsl(13, 79%, 51%)', 'text': '#FFFFFF'}, {'name': 'CSS', 'key': 'css', 'hex': '#2264f1', 'rgb': 'rgb(34, 100, 241)', 'hsl': 'hsl(221, 88%, 54%)', 'text': '#FFFFFF'}, {'name': 'JavaScript', 'key': 'javascript', 'hex': '#FFEb38', 'rgb': 'rgb(255, 235, 56)', 'hsl': 'hsl(54, 100%, 61%)', 'text': '#000000'}, {'name': 'Bootstrap', 'key': 'bootstrap', 'hex': '#6F2AF8', 'rgb': 'rgb(111, 42, 248)', 'hsl': 'hsl(260, 94%, 57%)', 'text': '#FFFFFF'}, {'name': 'React', 'key': 'react', 'hex': '#5ED3F3', 'rgb': 'rgb(94, 211, 243)', 'hsl': 'hsl(193, 86%, 66%)', 'text': '#000000'}, {'name': 'Laravel', 'key': 'laravel', 'hex': '#FF2A1F', 'rgb': 'rgb(255, 42, 31)', 'hsl': 'hsl(3, 100%, 56%)', 'text': '#FFFFFF'}, {'name': 'Astro', 'key': 'astro', 'hex': '#FF5E00', 'rgb': 'rgb(255, 94, 0)', 'hsl': 'hsl(22, 100%, 50%)', 'text': '#FFFFFF'}]}]}]
Use Pandas lib to load the colors into a nice table
In [2]:
import json
import pandas as pd
# Open and load the JSON file
with open('./data/color-groups.json') as f:
color_data = json.load(f)
# Flatten swatches
swatches = []
for category in color_data:
for group in category.get("groups", []):
for swatch in group.get("swatches", []):
swatches.append({
"category": category["name"],
"group": group.get("name", ""),
**swatch
})
df = pd.DataFrame(swatches)
df.head()
Out[2]:
| category | group | name | key | hex | rgb | hsl | text | rbg | |
|---|---|---|---|---|---|---|---|---|---|
| 0 | Basic Colors | White | white | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | #000000 | NaN | |
| 1 | Basic Colors | Black | black | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | #FFFFFF | NaN | |
| 2 | Basic Colors | Gray | gray | #888888 | rgb(136, 136, 136) | hsl(0, 0%, 53%) | #000000 | NaN | |
| 3 | Basic Colors | Red | red | #FF0000 | rgb(255, 0, 0) | rgb(255, 0, 0) | #FFFFFF | NaN | |
| 4 | Basic Colors | Yellow | yellow | #FFFF00 | rgb(255, 255, 0) | hsl(60, 100%, 50%) | #000000 | NaN |
Ok, now that I have the colors in a nice tabluar format, I want to format it into Typescript code.
Prompt: Give me the code to format data into
the following format and save it as a .ts file:
[
{
groupTitle: 'Basic Colors',
colors: [
{ title: 'White', value: '#ffffff', textColor: '#000', bgColor: '#ffffff' },
{ title: 'Black', value: '#000000', textColor: '#fff', bgColor: '#000000' },
{ title: 'Grey', value: '#888888', textColor: '#fff', bgColor: '#888888' },
{ title: 'Red', value: '#ff0000', textColor: '#fff', bgColor: '#ff0000' },
{ title: 'Yellow', value: '#fff000', textColor: '#000', bgColor: '#fff000' },
{ title: 'Green', value: '#00ff00', textColor: '#000', bgColor: '#00ff00' },
{ title: 'Cyan', value: '#00ffff', textColor: '#000', bgColor: '#00ffff' },
{ title: 'Blue', value: '#0000ff', textColor: '#fff', bgColor: '#0000ff' },
{ title: 'Magenta', value: '#ff00ff', textColor: '#fff', bgColor: '#ff00ff' },
],
}
]
In [3]:
import json
# Load the original JSON data
with open('./data/color-groups.json', 'r') as f:
data = json.load(f)
# Format the data
formatted_data = []
for category in data:
group = {
"groupTitle": category["name"],
"colors": []
}
for color_group in category.get("groups", []):
for swatch in color_group.get("swatches", []):
group["colors"].append({
"title": swatch["name"],
"value": swatch["hex"].lower(),
"textColor": swatch["text"].lower(),
"bgColor": swatch["hex"].lower()
})
formatted_data.append(group)
# Convert to TypeScript format (as a string)
ts_content = "export const colorGroups = " + json.dumps(formatted_data, indent=2) + ";\n"
# Save to a .ts file
with open('./output/color-groups.ts', 'w') as ts_file:
ts_file.write(ts_content)
print("✅ TypeScript file saved as color-groups.ts")
✅ TypeScript file saved as color-groups.ts
Yes! I got what I needed using Python and ChatGPT!
-- THE END --