catppuccin-palette/index.js

829 lines
13 KiB
JavaScript

// catppuccin palettes
const latte = {
rosewater: {
hex: '#de9584',
rgb: 'rgb(222, 149, 132)',
hsl: 'hsl(11, 58%, 69%)',
},
flamingo: {
hex: '#dd7878',
rgb: 'rgb(221, 120, 120)',
hsl: 'hsl(0, 60%, 67%)',
},
pink: {
hex: '#ec83d0',
rgb: 'rgb(236, 131, 208)',
hsl: 'hsl(316, 73%, 72%)',
},
mauve: {
hex: '#8839ef',
rgb: 'rgb(136, 57, 239)',
hsl: 'hsl(266, 85%, 58%)',
},
red: {
hex: '#d20f39',
rgb: 'rgb(210, 15, 57)',
hsl: 'hsl(347, 87%, 44%)',
},
maroon: {
hex: '#e64553',
rgb: 'rgb(230, 69, 83)',
hsl: 'hsl(355, 76%, 59%)',
},
peach: {
hex: '#fe640b',
rgb: 'rgb(254, 100, 11)',
hsl: ' hsl(22, 99%, 52%)',
},
yellow: {
hex: '#e49320',
rgb: 'rgb(228, 147, 32)',
hsl: 'hsl(35, 78%, 51%)',
},
green: {
hex: '#40a02b',
rgb: 'rgb(64, 160, 43)',
hsl: 'hsl(109, 58%, 40%)',
},
teal: {
hex: '#179299',
rgb: 'rgb(23, 146, 153)',
hsl: 'hsl(183, 74%, 35%)',
},
sky: {
hex: '#04a5e5',
rgb: 'rgb(4, 165, 229)',
hsl: 'hsl(197, 97%, 46%)',
},
sapphire: {
hex: '#209fb5',
rgb: 'rgb(32, 159, 181)',
hsl: 'hsl(189, 70%, 42%)',
},
blue: {
hex: '#2a6ef5',
rgb: 'rgb(42, 110, 245)',
hsl: 'hsl(220, 91%, 56%)',
},
lavender: {
hex: '#7287fd',
rgb: 'rgb(114, 135, 253)',
hsl: 'hsl(231, 97%, 72%)',
},
text: {
hex: '#4c4f69',
rgb: 'rgb(76, 79, 105)',
hsl: 'hsl(234, 16%, 35%)',
},
subtext1: {
hex: '#5c5f77',
rgb: 'rgb(92, 95, 119)',
hsl: 'hsl(233, 13%, 41%)',
},
subtext0: {
hex: '#6c6f85',
rgb: 'rgb(108, 111, 133)',
hsl: 'hsl(233, 10%, 47%)',
},
overlay2: {
hex: '#7c7f93',
rgb: 'rgb(124, 127, 147)',
hsl: 'hsl(232, 10%, 53%)',
},
overlay1: {
hex: '#8c8fa1',
rgb: 'rgb(140, 143, 161)',
hsl: 'hsl(231, 10%, 59%)',
},
overlay0: {
hex: '#9ca0b0',
rgb: 'rgb(156, 160, 176)',
hsl: 'hsl(228, 11%, 65%)',
},
surface2: {
hex: '#acb0be',
rgb: 'rgb(172, 176, 190)',
hsl: 'hsl(227, 12%, 71%)',
},
surface1: {
hex: '#bcc0cc',
rgb: 'rgb(188, 192, 204)',
hsl: 'hsl(225, 14%, 77%)',
},
surface0: {
hex: '#ccd0da',
rgb: 'rgb(204, 208, 218)',
hsl: 'hsl(223, 16%, 83%)',
},
crust: {
hex: '#dce0e8',
rgb: 'rgb(220, 224, 232)',
hsl: 'hsl(220, 21%, 89%)',
},
mantle: {
hex: '#e6e9ef',
rgb: 'rgb(230, 233, 239)',
hsl: 'hsl(220, 22%, 92%)',
},
base: {
hex: '#eff1f5',
rgb: 'rgb(239, 241, 245)',
hsl: 'hsl(220, 23%, 95%)',
},
}
const frappe = {
rosewater: {
hex: '#f2d5cf',
rgb: 'rgb(242, 213, 207)',
hsl: 'hsl(10, 57%, 88%)',
},
flamingo: {
hex: '#eebebe',
rgb: 'rgb(238, 190, 190)',
hsl: 'hsl(0, 59%, 84%)',
},
pink: {
hex: '#f4b8e4',
rgb: 'rgb(244, 184, 228)',
hsl: 'hsl(316, 73%, 84%)',
},
mauve: {
hex: '#ca9ee6',
rgb: 'rgb(202, 158, 230)',
hsl: 'hsl(277, 59%, 76%)',
},
red: {
hex: '#e78284',
rgb: 'rgb(231, 130, 132)',
hsl: 'hsl(359, 68%, 71%)',
},
maroon: {
hex: '#ea999c',
rgb: 'rgb(234, 153, 156)',
hsl: 'hsl(358, 66%, 76%)',
},
peach: {
hex: '#ef9f76',
rgb: 'rgb(239, 159, 118)',
hsl: 'hsl(20, 79%, 70%)',
},
yellow: {
hex: '#e5c890',
rgb: 'rgb(229, 200, 144)',
hsl: 'hsl(40, 62%, 73%)',
},
green: {
hex: '#a6d189',
rgb: 'rgb(166, 209, 137)',
hsl: 'hsl(96, 44%, 68%)',
},
teal: {
hex: '#81c8be',
rgb: 'rgb(129, 200, 190)',
hsl: 'hsl(172, 39%, 65%)',
},
sky: {
hex: '#99d1db',
rgb: 'rgb(153, 209, 219)',
hsl: 'hsl(189, 48%, 73%)',
},
sapphire: {
hex: '#85c1dc',
rgb: 'rgb(133, 193, 220)',
hsl: 'hsl(199, 55%, 69%)',
},
blue: {
hex: '#8caaee',
rgb: 'rgb(140, 170, 238)',
hsl: 'hsl(222, 74%, 74%)',
},
lavender: {
hex: '#babbf1',
rgb: 'rgb(186, 187, 241)',
hsl: 'hsl(239, 66%, 84%)',
},
text: {
hex: '#c6ceef',
rgb: 'rgb(198, 206, 239)',
hsl: 'hsl(228, 56%, 86%)',
},
subtext1: {
hex: '#b5bddc',
rgb: 'rgb(181, 189, 220)',
hsl: 'hsl(228, 36%, 79%)',
},
subtext0: {
hex: '#a5acc9',
rgb: 'rgb(165, 172, 201)',
hsl: 'hsl(228, 25%, 72%)',
},
overlay2: {
hex: '#949bb7',
rgb: 'rgb(148, 155, 183)',
hsl: 'hsl(228, 20%, 65%)',
},
overlay1: {
hex: '#838aa4',
rgb: 'rgb(131, 138, 164)',
hsl: 'hsl(227, 15%, 58%)',
},
overlay0: {
hex: '#737891',
rgb: 'rgb(115, 120, 145)',
hsl: 'hsl(230, 12%, 51%)',
},
surface2: {
hex: '#62677e',
rgb: 'rgb(98, 103, 126)',
hsl: 'hsl(229, 13%, 44%)',
},
surface1: {
hex: '#51566c',
rgb: 'rgb(81, 86, 108)',
hsl: 'hsl(229, 14%, 37%)',
},
surface0: {
hex: '#414559',
rgb: 'rgb(65, 69, 89)',
hsl: 'hsl(230, 16%, 30%)',
},
base: {
hex: '#303446',
rgb: 'rgb(48, 52, 70)',
hsl: 'hsl(229, 19%, 23%)',
},
mantle: {
hex: '#292c3c',
rgb: 'rgb(41, 44, 60)',
hsl: 'hsl(231, 19%, 20%)',
},
crust: {
hex: '#232634',
rgb: 'rgb(35, 38, 52)',
hsl: 'hsl(229, 20%, 17%)',
},
}
const macchiato = {
rosewater: {
hex: '#f4dbd6',
rgb: 'rgb(244, 219, 214)',
hsl: 'hsl(10, 58%, 90%)',
},
flamingo: {
hex: '#f0c6c6',
rgb: 'rgb(240, 198, 198)',
hsl: 'hsl(0, 58%, 86%)',
},
pink: {
hex: '#f5bde6',
rgb: 'rgb(245, 189, 230)',
hsl: 'hsl(316, 74%, 85%)',
},
mauve: {
hex: '#c6a0f6',
rgb: 'rgb(198, 160, 246)',
hsl: 'hsl(267, 83%, 80%)',
},
red: {
hex: '#ed8796',
rgb: 'rgb(237, 135, 150)',
hsl: 'hsl(351, 74%, 73%)',
},
maroon: {
hex: '#ee99a0',
rgb: 'rgb(238, 153, 160)',
hsl: 'hsl(355, 71%, 77%)',
},
peach: {
hex: '#f5a97f',
rgb: 'rgb(245, 169, 127)',
hsl: 'hsl(21, 86%, 73%)',
},
yellow: {
hex: '#eed49f',
rgb: 'rgb(238, 212, 159)',
hsl: 'hsl(40, 70%, 78%)',
},
green: {
hex: '#a6da95',
rgb: 'rgb(166, 218, 149)',
hsl: 'hsl(105, 48%, 72%)',
},
teal: {
hex: '#8bd5ca',
rgb: 'rgb(139, 213, 202)',
hsl: 'hsl(171, 47%, 69%)',
},
sky: {
hex: '#91d7e3',
rgb: 'rgb(145, 215, 227)',
hsl: 'hsl(189, 59%, 73%)',
},
sapphire: {
hex: '#7dc4e4',
rgb: 'rgb(125, 196, 228)',
hsl: 'hsl(199, 66%, 69%)',
},
blue: {
hex: '#8aadf4',
rgb: 'rgb(138, 173, 244)',
hsl: 'hsl(220, 83%, 75%)',
},
lavender: {
hex: '#b7bdf8',
rgb: 'rgb(183, 189, 248)',
hsl: 'hsl(234, 82%, 85%)',
},
text: {
hex: '#c5cff5',
rgb: 'rgb(197, 207, 245)',
hsl: 'hsl(228, 71%, 87%)',
},
subtext1: {
hex: '#b3bce0',
rgb: 'rgb(179, 188, 224)',
hsl: 'hsl(228, 42%, 79%)',
},
subtext0: {
hex: '#a1aacb',
rgb: 'rgb(161, 170, 203)',
hsl: 'hsl(227, 29%, 71%)',
},
overlay2: {
hex: '#8f97b7',
rgb: 'rgb(143, 151, 183)',
hsl: 'hsl(228, 22%, 64%)',
},
overlay1: {
hex: '#7d84a2',
rgb: 'rgb(125, 132, 162)',
hsl: 'hsl(229, 17%, 56%)',
},
overlay0: {
hex: '#6c728d',
rgb: 'rgb(108, 114, 141)',
hsl: 'hsl(229, 13%, 49%)',
},
surface2: {
hex: '#5a5f78',
rgb: 'rgb(90, 95, 120)',
hsl: 'hsl(230, 14%, 41%)',
},
surface1: {
hex: '#484c64',
rgb: 'rgb(72, 76, 100)',
hsl: 'hsl(231, 16%, 34%)',
},
surface0: {
hex: '#363a4f',
rgb: 'rgb(54, 58, 79)',
hsl: 'hsl(230, 19%, 26%)',
},
base: {
hex: '#24273a',
rgb: 'rgb(36, 39, 58)',
hsl: 'hsl(232, 23%, 18%)',
},
mantle: {
hex: '#1e2030',
rgb: 'rgb(30, 32, 48)',
hsl: 'hsl(233, 23%, 15%)',
},
crust: {
hex: '#181926',
rgb: 'rgb(24, 25, 38)',
hsl: 'hsl(236, 23%, 12%)',
},
}
const mocha = {
rosewater: {
hex: '#f5e0dc',
rgb: 'rgb(245, 224, 220)',
hsl: 'hsl(10, 56%, 91%)',
},
flamingo: {
hex: '#f2cdcd',
rgb: 'rgb(242, 205, 205)',
hsl: 'hsl(0, 59%, 88%)',
},
pink: {
hex: '#f5c2e7',
rgb: 'rgb(245, 194, 231)',
hsl: 'hsl(316, 72%, 86%)',
},
mauve: {
hex: '#cba6f7',
rgb: 'rgb(203, 166, 247)',
hsl: 'hsl(267, 84%, 81%)',
},
red: {
hex: '#f38ba8',
rgb: 'rgb(243, 139, 168)',
hsl: 'hsl(343, 81%, 75%)',
},
maroon: {
hex: '#eba0ac',
rgb: 'rgb(235, 160, 172)',
hsl: 'hsl(350, 65%, 77%)',
},
peach: {
hex: '#fab387',
rgb: 'rgb(250, 179, 135)',
hsl: 'hsl(23, 92%, 75%)',
},
yellow: {
hex: '#f9e2af',
rgb: 'rgb(249, 226, 175)',
hsl: 'hsl(41, 86%, 83%)',
},
green: {
hex: '#a6e3a1',
rgb: 'rgb(166, 227, 161)',
hsl: 'hsl(115, 54%, 76%)',
},
teal: {
hex: '#94e2d5',
rgb: 'rgb(148, 226, 213)',
hsl: 'hsl(170, 57%, 73%)',
},
sky: {
hex: '#89dceb',
rgb: 'rgb(137, 220, 235)',
hsl: 'hsl(189, 71%, 73%)',
},
sapphire: {
hex: '#74c7ec',
rgb: 'rgb(116, 199, 236)',
hsl: 'hsl(199, 76%, 69%)',
},
blue: {
hex: '#87b0f9',
rgb: 'rgb(135, 176, 249)',
hsl: 'hsl(218, 90%, 75%)',
},
lavender: {
hex: '#b4befe',
rgb: 'rgb(180, 190, 254)',
hsl: 'hsl(232, 97%, 85%)',
},
text: {
hex: '#c6d0f5',
rgb: 'rgb(198, 208, 245)',
hsl: 'hsl(227, 70%, 87%)',
},
subtext1: {
hex: '#b3bcdf',
rgb: 'rgb(179, 188, 223)',
hsl: 'hsl(228, 41%, 79%)',
},
subtext0: {
hex: '#a1a8c9',
rgb: 'rgb(161, 168, 201)',
hsl: 'hsl(229, 27%, 71%)',
},
overlay2: {
hex: '#8e95b3',
rgb: 'rgb(142, 149, 179)',
hsl: 'hsl(229, 20%, 63%)',
},
overlay1: {
hex: '#7b819d',
rgb: 'rgb(123, 129, 157)',
hsl: 'hsl(229, 15%, 55%)',
},
overlay0: {
hex: '#696d86',
rgb: 'rgb(105, 109, 134)',
hsl: 'hsl(232, 12%, 47%)',
},
surface2: {
hex: '#565970',
rgb: 'rgb(86, 89, 112)',
hsl: 'hsl(233, 13%, 39%)',
},
surface1: {
hex: '#43465a',
rgb: 'rgb(67, 70, 90)',
hsl: 'hsl(232, 15%, 31%)',
},
surface0: {
hex: '#313244',
rgb: 'rgb(49, 50, 68)',
hsl: 'hsl(237, 16%, 23%)',
},
base: {
hex: '#1e1e2e',
rgb: 'rgb(30, 30, 46)',
hsl: 'hsl(240, 21%, 15%)',
},
mantle: {
hex: '#181825',
rgb: 'rgb(24, 24, 37)',
hsl: 'hsl(240, 21%, 12%)',
},
crust: {
hex: '#11111b',
rgb: 'rgb(17, 17, 27)',
hsl: 'hsl(240, 23%, 9%)',
},
}
const palettes = {
variants: {
latte,
frappe,
macchiato,
mocha,
},
labels: {
rosewater: {
latte: latte.rosewater,
frappe: frappe.rosewater,
macchiato: macchiato.rosewater,
mocha: mocha.rosewater,
},
flamingo: {
latte: latte.flamingo,
frappe: frappe.flamingo,
macchiato: macchiato.flamingo,
mocha: mocha.flamingo,
},
pink: {
latte: latte.pink,
frappe: frappe.pink,
macchiato: macchiato.pink,
mocha: mocha.pink,
},
mauve: {
latte: latte.mauve,
frappe: frappe.mauve,
macchiato: macchiato.mauve,
mocha: mocha.mauve,
},
red: {
latte: latte.red,
frappe: frappe.red,
macchiato: macchiato.red,
mocha: mocha.red,
},
maroon: {
latte: latte.maroon,
frappe: frappe.maroon,
macchiato: macchiato.maroon,
mocha: mocha.maroon,
},
peach: {
latte: latte.peach,
frappe: frappe.peach,
macchiato: macchiato.peach,
mocha: mocha.peach,
},
yellow: {
latte: latte.yellow,
frappe: frappe.yellow,
macchiato: macchiato.yellow,
mocha: mocha.yellow,
},
green: {
latte: latte.green,
frappe: frappe.green,
macchiato: macchiato.green,
mocha: mocha.green,
},
teal: {
latte: latte.teal,
frappe: frappe.teal,
macchiato: macchiato.teal,
mocha: mocha.teal,
},
sky: {
latte: latte.sky,
frappe: frappe.sky,
macchiato: macchiato.sky,
mocha: mocha.sky,
},
sapphire: {
latte: latte.sapphire,
frappe: frappe.sapphire,
macchiato: macchiato.sapphire,
mocha: mocha.sapphire,
},
blue: {
latte: latte.blue,
frappe: frappe.blue,
macchiato: macchiato.blue,
mocha: mocha.blue,
},
lavender: {
latte: latte.lavender,
frappe: frappe.lavender,
macchiato: macchiato.lavender,
mocha: mocha.lavender,
},
text: {
latte: latte.text,
frappe: frappe.text,
macchiato: macchiato.text,
mocha: mocha.text,
},
subtext1: {
latte: latte.subtext1,
frappe: frappe.subtext1,
macchiato: macchiato.subtext1,
mocha: mocha.subtext1,
},
subtext0: {
latte: latte.subtext0,
frappe: frappe.subtext0,
macchiato: macchiato.subtext0,
mocha: mocha.subtext0,
},
overlay2: {
latte: latte.overlay2,
frappe: frappe.overlay2,
macchiato: macchiato.overlay2,
mocha: mocha.overlay2,
},
overlay1: {
latte: latte.overlay1,
frappe: frappe.overlay1,
macchiato: macchiato.overlay1,
mocha: mocha.overlay1,
},
overlay0: {
latte: latte.overlay0,
frappe: frappe.overlay0,
macchiato: macchiato.overlay0,
mocha: mocha.overlay0,
},
surface2: {
latte: latte.surface2,
frappe: frappe.surface2,
macchiato: macchiato.surface2,
mocha: mocha.surface2,
},
surface1: {
latte: latte.surface1,
frappe: frappe.surface1,
macchiato: macchiato.surface1,
mocha: mocha.surface1,
},
surface0: {
latte: latte.surface0,
frappe: frappe.surface0,
macchiato: macchiato.surface0,
mocha: mocha.surface0,
},
base: {
latte: latte.base,
frappe: frappe.base,
macchiato: macchiato.base,
mocha: mocha.base,
},
mantle: {
latte: latte.mantle,
frappe: frappe.mantle,
macchiato: macchiato.mantle,
mocha: mocha.mantle,
},
crust: {
latte: latte.crust,
frappe: frappe.crust,
macchiato: macchiato.crust,
mocha: mocha.crust,
},
},
}
export const {variants, labels} = palettes
export default palettes