Color Design
First, let me save you man-years of effort with my rules of thumb:
- Avoid ANSI 16 and ANSI 256 0-15. Here are different ways to show white on green. This screenshot is directly from my terminal. Because this a rule of thumb I will put the full explanation at the bottom of this page. Which one do you think looks best?
# ansi16 white on ansi16 green (borked)
printf '\e[37;42m 1. hello, world \e[0m\n'
# ansi256 brightwhite on ansi256 green (borked)
printf '\e[38;5;15;48;5;2m 2. hello, world \e[0m\n'
# ansi 256 system white on ansi256 system green (AWESOMENESS)
printf '\e[38;5;255;48;5;40m 3. hello, world \e[0m\n'
-
ANSI 256 for most apps. Avoid colors 0-15, they lie. When I say WHITE, I mean WHITE. Not off white. WHITE. You could go all the way to ANSI 16M, but as your app grows in popularity you will encounter oddball terminals that don't support it. Either use a library that detects & downsamples, or stick with ANSI 256.
-
Don't set background color. Don't mess with the user's background color, it's jarring. Since we are giving up control over background, you will need to pick two colors for each text style. If you want "blue" text, you will need to select both a light blue (for dark terminals) and a dark blue (for light terminals).
-
Invert with abandon. White text on a dark color (or vice versa) is an excellent choice for drawing attention.
Special note on downsampling. It's trivial to write a function that takes an RGB color and finds the closest ANSI 256 16-255 color using distance squared. Be careful - that approach completely fails to take human vision into account. You might want to read this, or at least ask your llm to consider the problem.
Color Converter
Behold, my incredible color converter technology. Type in a hex RGB and I will find the closest ansi 256 color and the closest tailwind color. Depending on my needs I might need one or the other. This tool uses DeltaE in Color.js for calculating perceptual distance.
original color
patiently awaiting input
closest ANSI 256 color
patiently awaiting input
closest Tailwind color
patiently awaiting input
Color Sets
Tailwind
I build lots of web apps and always use Tailwind. I love the tailwind color set, which makes it easy to pick colors and adjust the brightness. Wouldn't it be nice to use tailwind colors in your cli app? Look no further, here is Tailwind for popular languages:
// Tailwind colors, see https://ansi.md.
var Tailwind = TailwindColors{
Slate: Palette{
C50: "#f8fafc",
C100: "#f1f5f9",
C200: "#e2e8f0",
C300: "#cad5e2",
C400: "#90a1b9",
C500: "#62748e",
C600: "#45556c",
C700: "#314158",
C800: "#1d293d",
C900: "#0f172b",
C950: "#020618",
},
Gray: Palette{
C50: "#f9fafb",
C100: "#f3f4f6",
C200: "#e5e7eb",
C300: "#d1d5dc",
C400: "#99a1af",
C500: "#6a7282",
C600: "#4a5565",
C700: "#364153",
C800: "#1e2939",
C900: "#101828",
C950: "#030712",
},
Zinc: Palette{
C50: "#fafafa",
C100: "#f4f4f5",
C200: "#e4e4e7",
C300: "#d4d4d8",
C400: "#9f9fa9",
C500: "#71717b",
C600: "#52525c",
C700: "#3f3f46",
C800: "#27272a",
C900: "#18181b",
C950: "#09090b",
},
Neutral: Palette{
C50: "#fafafa",
C100: "#f5f5f5",
C200: "#e5e5e5",
C300: "#d4d4d4",
C400: "#a1a1a1",
C500: "#737373",
C600: "#525252",
C700: "#404040",
C800: "#262626",
C900: "#171717",
C950: "#0a0a0a",
},
Stone: Palette{
C50: "#fafaf9",
C100: "#f5f5f4",
C200: "#e7e5e4",
C300: "#d6d3d1",
C400: "#a6a09b",
C500: "#79716b",
C600: "#57534d",
C700: "#44403b",
C800: "#292524",
C900: "#1c1917",
C950: "#0c0a09",
},
Mauve: Palette{
C50: "#fafafa",
C100: "#f3f1f3",
C200: "#e7e4e7",
C300: "#d7d0d7",
C400: "#a89ea9",
C500: "#79697b",
C600: "#594c5b",
C700: "#463947",
C800: "#2a212c",
C900: "#1d161e",
C950: "#0c090c",
},
Olive: Palette{
C50: "#fbfbf9",
C100: "#f4f4f0",
C200: "#e8e8e3",
C300: "#d8d8d0",
C400: "#abab9c",
C500: "#7c7c67",
C600: "#5b5b4b",
C700: "#474739",
C800: "#2b2b22",
C900: "#1d1d16",
C950: "#0c0c09",
},
Mist: Palette{
C50: "#f9fbfb",
C100: "#f1f3f3",
C200: "#e3e7e8",
C300: "#d0d6d8",
C400: "#9ca8ab",
C500: "#67787c",
C600: "#4b585b",
C700: "#394447",
C800: "#22292b",
C900: "#161b1d",
C950: "#090b0c",
},
Taupe: Palette{
C50: "#fbfaf9",
C100: "#f3f1f1",
C200: "#e8e4e3",
C300: "#d8d2d0",
C400: "#aba09c",
C500: "#7c6d67",
C600: "#5b4f4b",
C700: "#473c39",
C800: "#2b2422",
C900: "#1d1816",
C950: "#0c0a09",
},
Red: Palette{
C50: "#fef2f2",
C100: "#ffe2e2",
C200: "#ffc9c9",
C300: "#ffa2a2",
C400: "#ff6467",
C500: "#fb2c36",
C600: "#e7000b",
C700: "#c10007",
C800: "#9f0712",
C900: "#82181a",
C950: "#460809",
},
Orange: Palette{
C50: "#fff7ed",
C100: "#ffedd4",
C200: "#ffd6a7",
C300: "#ffb86a",
C400: "#ff8904",
C500: "#ff6900",
C600: "#f54900",
C700: "#ca3500",
C800: "#9f2d00",
C900: "#7e2a0c",
C950: "#441306",
},
Amber: Palette{
C50: "#fffbeb",
C100: "#fef3c6",
C200: "#fee685",
C300: "#ffd230",
C400: "#ffba00",
C500: "#fd9a00",
C600: "#e17100",
C700: "#bb4d00",
C800: "#973c00",
C900: "#7b3306",
C950: "#461901",
},
Yellow: Palette{
C50: "#fefce8",
C100: "#fef9c2",
C200: "#fff085",
C300: "#ffdf20",
C400: "#fcc800",
C500: "#efb100",
C600: "#d08700",
C700: "#a65f00",
C800: "#894b00",
C900: "#733e0a",
C950: "#432004",
},
Lime: Palette{
C50: "#f7fee7",
C100: "#ecfcca",
C200: "#d8f999",
C300: "#bbf451",
C400: "#9ae600",
C500: "#7ccf00",
C600: "#5ea500",
C700: "#497d00",
C800: "#3c6300",
C900: "#35530e",
C950: "#192e03",
},
Green: Palette{
C50: "#f0fdf4",
C100: "#dcfce7",
C200: "#b9f8cf",
C300: "#7bf1a8",
C400: "#05df72",
C500: "#00c950",
C600: "#00a63e",
C700: "#008236",
C800: "#016630",
C900: "#0d542b",
C950: "#032e15",
},
Emerald: Palette{
C50: "#ecfdf5",
C100: "#d0fae5",
C200: "#a4f4cf",
C300: "#5ee9b5",
C400: "#00d492",
C500: "#00bc7d",
C600: "#009966",
C700: "#007a55",
C800: "#006045",
C900: "#004f3b",
C950: "#002c22",
},
Teal: Palette{
C50: "#f0fdfa",
C100: "#cbfbf1",
C200: "#96f7e4",
C300: "#46ecd5",
C400: "#00d5be",
C500: "#00bba7",
C600: "#009689",
C700: "#00786f",
C800: "#005f5a",
C900: "#0b4f4a",
C950: "#022f2e",
},
Cyan: Palette{
C50: "#ecfeff",
C100: "#cefafe",
C200: "#a2f4fd",
C300: "#53eafd",
C400: "#00d3f2",
C500: "#00b8db",
C600: "#0092b8",
C700: "#007595",
C800: "#005f78",
C900: "#104e64",
C950: "#053345",
},
Sky: Palette{
C50: "#f0f9ff",
C100: "#dff2fe",
C200: "#b8e6fe",
C300: "#74d4ff",
C400: "#00bcff",
C500: "#00a6f4",
C600: "#0084d1",
C700: "#0069a8",
C800: "#00598a",
C900: "#024a70",
C950: "#052f4a",
},
Blue: Palette{
C50: "#eff6ff",
C100: "#dbeafe",
C200: "#bedbff",
C300: "#8ec5ff",
C400: "#51a2ff",
C500: "#2b7fff",
C600: "#155dfc",
C700: "#1447e6",
C800: "#193cb8",
C900: "#1c398e",
C950: "#162456",
},
Indigo: Palette{
C50: "#eef2ff",
C100: "#e0e7ff",
C200: "#c6d2ff",
C300: "#a3b3ff",
C400: "#7c86ff",
C500: "#615fff",
C600: "#4f39f6",
C700: "#432dd7",
C800: "#372aac",
C900: "#312c85",
C950: "#1e1a4d",
},
Violet: Palette{
C50: "#f5f3ff",
C100: "#ede9fe",
C200: "#ddd6ff",
C300: "#c4b4ff",
C400: "#a684ff",
C500: "#8e51ff",
C600: "#7f22fe",
C700: "#7008e7",
C800: "#5d0ec0",
C900: "#4d179a",
C950: "#2f0d68",
},
Purple: Palette{
C50: "#faf5ff",
C100: "#f3e8ff",
C200: "#e9d4ff",
C300: "#dab2ff",
C400: "#c27aff",
C500: "#ad46ff",
C600: "#9810fa",
C700: "#8200db",
C800: "#6e11b0",
C900: "#59168b",
C950: "#3c0366",
},
Fuchsia: Palette{
C50: "#fdf4ff",
C100: "#fae8ff",
C200: "#f6cfff",
C300: "#f4a8ff",
C400: "#ed6aff",
C500: "#e12afb",
C600: "#c800de",
C700: "#a800b7",
C800: "#8a0194",
C900: "#721378",
C950: "#4b004f",
},
Pink: Palette{
C50: "#fdf2f8",
C100: "#fce7f3",
C200: "#fccee8",
C300: "#fda5d5",
C400: "#fb64b6",
C500: "#f6339a",
C600: "#e60076",
C700: "#c6005c",
C800: "#a3004c",
C900: "#861043",
C950: "#510424",
},
Rose: Palette{
C50: "#fff1f2",
C100: "#ffe4e6",
C200: "#ffccd3",
C300: "#ffa1ad",
C400: "#ff637e",
C500: "#ff2056",
C600: "#ec003f",
C700: "#c70036",
C800: "#a50036",
C900: "#8b0836",
C950: "#4d0218",
},
}
type TailwindColors struct {
Slate Palette
Gray Palette
Zinc Palette
Neutral Palette
Stone Palette
Mauve Palette
Olive Palette
Mist Palette
Taupe Palette
Red Palette
Orange Palette
Amber Palette
Yellow Palette
Lime Palette
Green Palette
Emerald Palette
Teal Palette
Cyan Palette
Sky Palette
Blue Palette
Indigo Palette
Violet Palette
Purple Palette
Fuchsia Palette
Pink Palette
Rose Palette
}
type Palette struct {
C50 string
C100 string
C200 string
C300 string
C400 string
C500 string
C600 string
C700 string
C800 string
C900 string
C950 string
}{
"slate": {
"50": "#f8fafc",
"100": "#f1f5f9",
"200": "#e2e8f0",
"300": "#cad5e2",
"400": "#90a1b9",
"500": "#62748e",
"600": "#45556c",
"700": "#314158",
"800": "#1d293d",
"900": "#0f172b",
"950": "#020618"
},
"gray": {
"50": "#f9fafb",
"100": "#f3f4f6",
"200": "#e5e7eb",
"300": "#d1d5dc",
"400": "#99a1af",
"500": "#6a7282",
"600": "#4a5565",
"700": "#364153",
"800": "#1e2939",
"900": "#101828",
"950": "#030712"
},
"zinc": {
"50": "#fafafa",
"100": "#f4f4f5",
"200": "#e4e4e7",
"300": "#d4d4d8",
"400": "#9f9fa9",
"500": "#71717b",
"600": "#52525c",
"700": "#3f3f46",
"800": "#27272a",
"900": "#18181b",
"950": "#09090b"
},
"neutral": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#e5e5e5",
"300": "#d4d4d4",
"400": "#a1a1a1",
"500": "#737373",
"600": "#525252",
"700": "#404040",
"800": "#262626",
"900": "#171717",
"950": "#0a0a0a"
},
"stone": {
"50": "#fafaf9",
"100": "#f5f5f4",
"200": "#e7e5e4",
"300": "#d6d3d1",
"400": "#a6a09b",
"500": "#79716b",
"600": "#57534d",
"700": "#44403b",
"800": "#292524",
"900": "#1c1917",
"950": "#0c0a09"
},
"mauve": {
"50": "#fafafa",
"100": "#f3f1f3",
"200": "#e7e4e7",
"300": "#d7d0d7",
"400": "#a89ea9",
"500": "#79697b",
"600": "#594c5b",
"700": "#463947",
"800": "#2a212c",
"900": "#1d161e",
"950": "#0c090c"
},
"olive": {
"50": "#fbfbf9",
"100": "#f4f4f0",
"200": "#e8e8e3",
"300": "#d8d8d0",
"400": "#abab9c",
"500": "#7c7c67",
"600": "#5b5b4b",
"700": "#474739",
"800": "#2b2b22",
"900": "#1d1d16",
"950": "#0c0c09"
},
"mist": {
"50": "#f9fbfb",
"100": "#f1f3f3",
"200": "#e3e7e8",
"300": "#d0d6d8",
"400": "#9ca8ab",
"500": "#67787c",
"600": "#4b585b",
"700": "#394447",
"800": "#22292b",
"900": "#161b1d",
"950": "#090b0c"
},
"taupe": {
"50": "#fbfaf9",
"100": "#f3f1f1",
"200": "#e8e4e3",
"300": "#d8d2d0",
"400": "#aba09c",
"500": "#7c6d67",
"600": "#5b4f4b",
"700": "#473c39",
"800": "#2b2422",
"900": "#1d1816",
"950": "#0c0a09"
},
"red": {
"50": "#fef2f2",
"100": "#ffe2e2",
"200": "#ffc9c9",
"300": "#ffa2a2",
"400": "#ff6467",
"500": "#fb2c36",
"600": "#e7000b",
"700": "#c10007",
"800": "#9f0712",
"900": "#82181a",
"950": "#460809"
},
"orange": {
"50": "#fff7ed",
"100": "#ffedd4",
"200": "#ffd6a7",
"300": "#ffb86a",
"400": "#ff8904",
"500": "#ff6900",
"600": "#f54900",
"700": "#ca3500",
"800": "#9f2d00",
"900": "#7e2a0c",
"950": "#441306"
},
"amber": {
"50": "#fffbeb",
"100": "#fef3c6",
"200": "#fee685",
"300": "#ffd230",
"400": "#ffba00",
"500": "#fd9a00",
"600": "#e17100",
"700": "#bb4d00",
"800": "#973c00",
"900": "#7b3306",
"950": "#461901"
},
"yellow": {
"50": "#fefce8",
"100": "#fef9c2",
"200": "#fff085",
"300": "#ffdf20",
"400": "#fcc800",
"500": "#efb100",
"600": "#d08700",
"700": "#a65f00",
"800": "#894b00",
"900": "#733e0a",
"950": "#432004"
},
"lime": {
"50": "#f7fee7",
"100": "#ecfcca",
"200": "#d8f999",
"300": "#bbf451",
"400": "#9ae600",
"500": "#7ccf00",
"600": "#5ea500",
"700": "#497d00",
"800": "#3c6300",
"900": "#35530e",
"950": "#192e03"
},
"green": {
"50": "#f0fdf4",
"100": "#dcfce7",
"200": "#b9f8cf",
"300": "#7bf1a8",
"400": "#05df72",
"500": "#00c950",
"600": "#00a63e",
"700": "#008236",
"800": "#016630",
"900": "#0d542b",
"950": "#032e15"
},
"emerald": {
"50": "#ecfdf5",
"100": "#d0fae5",
"200": "#a4f4cf",
"300": "#5ee9b5",
"400": "#00d492",
"500": "#00bc7d",
"600": "#009966",
"700": "#007a55",
"800": "#006045",
"900": "#004f3b",
"950": "#002c22"
},
"teal": {
"50": "#f0fdfa",
"100": "#cbfbf1",
"200": "#96f7e4",
"300": "#46ecd5",
"400": "#00d5be",
"500": "#00bba7",
"600": "#009689",
"700": "#00786f",
"800": "#005f5a",
"900": "#0b4f4a",
"950": "#022f2e"
},
"cyan": {
"50": "#ecfeff",
"100": "#cefafe",
"200": "#a2f4fd",
"300": "#53eafd",
"400": "#00d3f2",
"500": "#00b8db",
"600": "#0092b8",
"700": "#007595",
"800": "#005f78",
"900": "#104e64",
"950": "#053345"
},
"sky": {
"50": "#f0f9ff",
"100": "#dff2fe",
"200": "#b8e6fe",
"300": "#74d4ff",
"400": "#00bcff",
"500": "#00a6f4",
"600": "#0084d1",
"700": "#0069a8",
"800": "#00598a",
"900": "#024a70",
"950": "#052f4a"
},
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bedbff",
"300": "#8ec5ff",
"400": "#51a2ff",
"500": "#2b7fff",
"600": "#155dfc",
"700": "#1447e6",
"800": "#193cb8",
"900": "#1c398e",
"950": "#162456"
},
"indigo": {
"50": "#eef2ff",
"100": "#e0e7ff",
"200": "#c6d2ff",
"300": "#a3b3ff",
"400": "#7c86ff",
"500": "#615fff",
"600": "#4f39f6",
"700": "#432dd7",
"800": "#372aac",
"900": "#312c85",
"950": "#1e1a4d"
},
"violet": {
"50": "#f5f3ff",
"100": "#ede9fe",
"200": "#ddd6ff",
"300": "#c4b4ff",
"400": "#a684ff",
"500": "#8e51ff",
"600": "#7f22fe",
"700": "#7008e7",
"800": "#5d0ec0",
"900": "#4d179a",
"950": "#2f0d68"
},
"purple": {
"50": "#faf5ff",
"100": "#f3e8ff",
"200": "#e9d4ff",
"300": "#dab2ff",
"400": "#c27aff",
"500": "#ad46ff",
"600": "#9810fa",
"700": "#8200db",
"800": "#6e11b0",
"900": "#59168b",
"950": "#3c0366"
},
"fuchsia": {
"50": "#fdf4ff",
"100": "#fae8ff",
"200": "#f6cfff",
"300": "#f4a8ff",
"400": "#ed6aff",
"500": "#e12afb",
"600": "#c800de",
"700": "#a800b7",
"800": "#8a0194",
"900": "#721378",
"950": "#4b004f"
},
"pink": {
"50": "#fdf2f8",
"100": "#fce7f3",
"200": "#fccee8",
"300": "#fda5d5",
"400": "#fb64b6",
"500": "#f6339a",
"600": "#e60076",
"700": "#c6005c",
"800": "#a3004c",
"900": "#861043",
"950": "#510424"
},
"rose": {
"50": "#fff1f2",
"100": "#ffe4e6",
"200": "#ffccd3",
"300": "#ffa1ad",
"400": "#ff637e",
"500": "#ff2056",
"600": "#ec003f",
"700": "#c70036",
"800": "#a50036",
"900": "#8b0836",
"950": "#4d0218"
}
}# Tailwind colors, see https://ansi.md.
TAILWIND: dict[str, dict[int, str]] = {
"slate": {
"50": "#f8fafc",
"100": "#f1f5f9",
"200": "#e2e8f0",
"300": "#cad5e2",
"400": "#90a1b9",
"500": "#62748e",
"600": "#45556c",
"700": "#314158",
"800": "#1d293d",
"900": "#0f172b",
"950": "#020618",
},
"gray": {
"50": "#f9fafb",
"100": "#f3f4f6",
"200": "#e5e7eb",
"300": "#d1d5dc",
"400": "#99a1af",
"500": "#6a7282",
"600": "#4a5565",
"700": "#364153",
"800": "#1e2939",
"900": "#101828",
"950": "#030712",
},
"zinc": {
"50": "#fafafa",
"100": "#f4f4f5",
"200": "#e4e4e7",
"300": "#d4d4d8",
"400": "#9f9fa9",
"500": "#71717b",
"600": "#52525c",
"700": "#3f3f46",
"800": "#27272a",
"900": "#18181b",
"950": "#09090b",
},
"neutral": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#e5e5e5",
"300": "#d4d4d4",
"400": "#a1a1a1",
"500": "#737373",
"600": "#525252",
"700": "#404040",
"800": "#262626",
"900": "#171717",
"950": "#0a0a0a",
},
"stone": {
"50": "#fafaf9",
"100": "#f5f5f4",
"200": "#e7e5e4",
"300": "#d6d3d1",
"400": "#a6a09b",
"500": "#79716b",
"600": "#57534d",
"700": "#44403b",
"800": "#292524",
"900": "#1c1917",
"950": "#0c0a09",
},
"mauve": {
"50": "#fafafa",
"100": "#f3f1f3",
"200": "#e7e4e7",
"300": "#d7d0d7",
"400": "#a89ea9",
"500": "#79697b",
"600": "#594c5b",
"700": "#463947",
"800": "#2a212c",
"900": "#1d161e",
"950": "#0c090c",
},
"olive": {
"50": "#fbfbf9",
"100": "#f4f4f0",
"200": "#e8e8e3",
"300": "#d8d8d0",
"400": "#abab9c",
"500": "#7c7c67",
"600": "#5b5b4b",
"700": "#474739",
"800": "#2b2b22",
"900": "#1d1d16",
"950": "#0c0c09",
},
"mist": {
"50": "#f9fbfb",
"100": "#f1f3f3",
"200": "#e3e7e8",
"300": "#d0d6d8",
"400": "#9ca8ab",
"500": "#67787c",
"600": "#4b585b",
"700": "#394447",
"800": "#22292b",
"900": "#161b1d",
"950": "#090b0c",
},
"taupe": {
"50": "#fbfaf9",
"100": "#f3f1f1",
"200": "#e8e4e3",
"300": "#d8d2d0",
"400": "#aba09c",
"500": "#7c6d67",
"600": "#5b4f4b",
"700": "#473c39",
"800": "#2b2422",
"900": "#1d1816",
"950": "#0c0a09",
},
"red": {
"50": "#fef2f2",
"100": "#ffe2e2",
"200": "#ffc9c9",
"300": "#ffa2a2",
"400": "#ff6467",
"500": "#fb2c36",
"600": "#e7000b",
"700": "#c10007",
"800": "#9f0712",
"900": "#82181a",
"950": "#460809",
},
"orange": {
"50": "#fff7ed",
"100": "#ffedd4",
"200": "#ffd6a7",
"300": "#ffb86a",
"400": "#ff8904",
"500": "#ff6900",
"600": "#f54900",
"700": "#ca3500",
"800": "#9f2d00",
"900": "#7e2a0c",
"950": "#441306",
},
"amber": {
"50": "#fffbeb",
"100": "#fef3c6",
"200": "#fee685",
"300": "#ffd230",
"400": "#ffba00",
"500": "#fd9a00",
"600": "#e17100",
"700": "#bb4d00",
"800": "#973c00",
"900": "#7b3306",
"950": "#461901",
},
"yellow": {
"50": "#fefce8",
"100": "#fef9c2",
"200": "#fff085",
"300": "#ffdf20",
"400": "#fcc800",
"500": "#efb100",
"600": "#d08700",
"700": "#a65f00",
"800": "#894b00",
"900": "#733e0a",
"950": "#432004",
},
"lime": {
"50": "#f7fee7",
"100": "#ecfcca",
"200": "#d8f999",
"300": "#bbf451",
"400": "#9ae600",
"500": "#7ccf00",
"600": "#5ea500",
"700": "#497d00",
"800": "#3c6300",
"900": "#35530e",
"950": "#192e03",
},
"green": {
"50": "#f0fdf4",
"100": "#dcfce7",
"200": "#b9f8cf",
"300": "#7bf1a8",
"400": "#05df72",
"500": "#00c950",
"600": "#00a63e",
"700": "#008236",
"800": "#016630",
"900": "#0d542b",
"950": "#032e15",
},
"emerald": {
"50": "#ecfdf5",
"100": "#d0fae5",
"200": "#a4f4cf",
"300": "#5ee9b5",
"400": "#00d492",
"500": "#00bc7d",
"600": "#009966",
"700": "#007a55",
"800": "#006045",
"900": "#004f3b",
"950": "#002c22",
},
"teal": {
"50": "#f0fdfa",
"100": "#cbfbf1",
"200": "#96f7e4",
"300": "#46ecd5",
"400": "#00d5be",
"500": "#00bba7",
"600": "#009689",
"700": "#00786f",
"800": "#005f5a",
"900": "#0b4f4a",
"950": "#022f2e",
},
"cyan": {
"50": "#ecfeff",
"100": "#cefafe",
"200": "#a2f4fd",
"300": "#53eafd",
"400": "#00d3f2",
"500": "#00b8db",
"600": "#0092b8",
"700": "#007595",
"800": "#005f78",
"900": "#104e64",
"950": "#053345",
},
"sky": {
"50": "#f0f9ff",
"100": "#dff2fe",
"200": "#b8e6fe",
"300": "#74d4ff",
"400": "#00bcff",
"500": "#00a6f4",
"600": "#0084d1",
"700": "#0069a8",
"800": "#00598a",
"900": "#024a70",
"950": "#052f4a",
},
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bedbff",
"300": "#8ec5ff",
"400": "#51a2ff",
"500": "#2b7fff",
"600": "#155dfc",
"700": "#1447e6",
"800": "#193cb8",
"900": "#1c398e",
"950": "#162456",
},
"indigo": {
"50": "#eef2ff",
"100": "#e0e7ff",
"200": "#c6d2ff",
"300": "#a3b3ff",
"400": "#7c86ff",
"500": "#615fff",
"600": "#4f39f6",
"700": "#432dd7",
"800": "#372aac",
"900": "#312c85",
"950": "#1e1a4d",
},
"violet": {
"50": "#f5f3ff",
"100": "#ede9fe",
"200": "#ddd6ff",
"300": "#c4b4ff",
"400": "#a684ff",
"500": "#8e51ff",
"600": "#7f22fe",
"700": "#7008e7",
"800": "#5d0ec0",
"900": "#4d179a",
"950": "#2f0d68",
},
"purple": {
"50": "#faf5ff",
"100": "#f3e8ff",
"200": "#e9d4ff",
"300": "#dab2ff",
"400": "#c27aff",
"500": "#ad46ff",
"600": "#9810fa",
"700": "#8200db",
"800": "#6e11b0",
"900": "#59168b",
"950": "#3c0366",
},
"fuchsia": {
"50": "#fdf4ff",
"100": "#fae8ff",
"200": "#f6cfff",
"300": "#f4a8ff",
"400": "#ed6aff",
"500": "#e12afb",
"600": "#c800de",
"700": "#a800b7",
"800": "#8a0194",
"900": "#721378",
"950": "#4b004f",
},
"pink": {
"50": "#fdf2f8",
"100": "#fce7f3",
"200": "#fccee8",
"300": "#fda5d5",
"400": "#fb64b6",
"500": "#f6339a",
"600": "#e60076",
"700": "#c6005c",
"800": "#a3004c",
"900": "#861043",
"950": "#510424",
},
"rose": {
"50": "#fff1f2",
"100": "#ffe4e6",
"200": "#ffccd3",
"300": "#ffa1ad",
"400": "#ff637e",
"500": "#ff2056",
"600": "#ec003f",
"700": "#c70036",
"800": "#a50036",
"900": "#8b0836",
"950": "#4d0218",
},
}# Tailwind colors, see https://ansi.md.
Palette = Data.define(*%i[c50 c100 c200 c300 c400 c500 c600 c700 c800 c900 c950])
TAILWIND = {
slate: Palette.new(
c50: "#f8fafc",
c100: "#f1f5f9",
c200: "#e2e8f0",
c300: "#cad5e2",
c400: "#90a1b9",
c500: "#62748e",
c600: "#45556c",
c700: "#314158",
c800: "#1d293d",
c900: "#0f172b",
c950: "#020618",
),
gray: Palette.new(
c50: "#f9fafb",
c100: "#f3f4f6",
c200: "#e5e7eb",
c300: "#d1d5dc",
c400: "#99a1af",
c500: "#6a7282",
c600: "#4a5565",
c700: "#364153",
c800: "#1e2939",
c900: "#101828",
c950: "#030712",
),
zinc: Palette.new(
c50: "#fafafa",
c100: "#f4f4f5",
c200: "#e4e4e7",
c300: "#d4d4d8",
c400: "#9f9fa9",
c500: "#71717b",
c600: "#52525c",
c700: "#3f3f46",
c800: "#27272a",
c900: "#18181b",
c950: "#09090b",
),
neutral: Palette.new(
c50: "#fafafa",
c100: "#f5f5f5",
c200: "#e5e5e5",
c300: "#d4d4d4",
c400: "#a1a1a1",
c500: "#737373",
c600: "#525252",
c700: "#404040",
c800: "#262626",
c900: "#171717",
c950: "#0a0a0a",
),
stone: Palette.new(
c50: "#fafaf9",
c100: "#f5f5f4",
c200: "#e7e5e4",
c300: "#d6d3d1",
c400: "#a6a09b",
c500: "#79716b",
c600: "#57534d",
c700: "#44403b",
c800: "#292524",
c900: "#1c1917",
c950: "#0c0a09",
),
mauve: Palette.new(
c50: "#fafafa",
c100: "#f3f1f3",
c200: "#e7e4e7",
c300: "#d7d0d7",
c400: "#a89ea9",
c500: "#79697b",
c600: "#594c5b",
c700: "#463947",
c800: "#2a212c",
c900: "#1d161e",
c950: "#0c090c",
),
olive: Palette.new(
c50: "#fbfbf9",
c100: "#f4f4f0",
c200: "#e8e8e3",
c300: "#d8d8d0",
c400: "#abab9c",
c500: "#7c7c67",
c600: "#5b5b4b",
c700: "#474739",
c800: "#2b2b22",
c900: "#1d1d16",
c950: "#0c0c09",
),
mist: Palette.new(
c50: "#f9fbfb",
c100: "#f1f3f3",
c200: "#e3e7e8",
c300: "#d0d6d8",
c400: "#9ca8ab",
c500: "#67787c",
c600: "#4b585b",
c700: "#394447",
c800: "#22292b",
c900: "#161b1d",
c950: "#090b0c",
),
taupe: Palette.new(
c50: "#fbfaf9",
c100: "#f3f1f1",
c200: "#e8e4e3",
c300: "#d8d2d0",
c400: "#aba09c",
c500: "#7c6d67",
c600: "#5b4f4b",
c700: "#473c39",
c800: "#2b2422",
c900: "#1d1816",
c950: "#0c0a09",
),
red: Palette.new(
c50: "#fef2f2",
c100: "#ffe2e2",
c200: "#ffc9c9",
c300: "#ffa2a2",
c400: "#ff6467",
c500: "#fb2c36",
c600: "#e7000b",
c700: "#c10007",
c800: "#9f0712",
c900: "#82181a",
c950: "#460809",
),
orange: Palette.new(
c50: "#fff7ed",
c100: "#ffedd4",
c200: "#ffd6a7",
c300: "#ffb86a",
c400: "#ff8904",
c500: "#ff6900",
c600: "#f54900",
c700: "#ca3500",
c800: "#9f2d00",
c900: "#7e2a0c",
c950: "#441306",
),
amber: Palette.new(
c50: "#fffbeb",
c100: "#fef3c6",
c200: "#fee685",
c300: "#ffd230",
c400: "#ffba00",
c500: "#fd9a00",
c600: "#e17100",
c700: "#bb4d00",
c800: "#973c00",
c900: "#7b3306",
c950: "#461901",
),
yellow: Palette.new(
c50: "#fefce8",
c100: "#fef9c2",
c200: "#fff085",
c300: "#ffdf20",
c400: "#fcc800",
c500: "#efb100",
c600: "#d08700",
c700: "#a65f00",
c800: "#894b00",
c900: "#733e0a",
c950: "#432004",
),
lime: Palette.new(
c50: "#f7fee7",
c100: "#ecfcca",
c200: "#d8f999",
c300: "#bbf451",
c400: "#9ae600",
c500: "#7ccf00",
c600: "#5ea500",
c700: "#497d00",
c800: "#3c6300",
c900: "#35530e",
c950: "#192e03",
),
green: Palette.new(
c50: "#f0fdf4",
c100: "#dcfce7",
c200: "#b9f8cf",
c300: "#7bf1a8",
c400: "#05df72",
c500: "#00c950",
c600: "#00a63e",
c700: "#008236",
c800: "#016630",
c900: "#0d542b",
c950: "#032e15",
),
emerald: Palette.new(
c50: "#ecfdf5",
c100: "#d0fae5",
c200: "#a4f4cf",
c300: "#5ee9b5",
c400: "#00d492",
c500: "#00bc7d",
c600: "#009966",
c700: "#007a55",
c800: "#006045",
c900: "#004f3b",
c950: "#002c22",
),
teal: Palette.new(
c50: "#f0fdfa",
c100: "#cbfbf1",
c200: "#96f7e4",
c300: "#46ecd5",
c400: "#00d5be",
c500: "#00bba7",
c600: "#009689",
c700: "#00786f",
c800: "#005f5a",
c900: "#0b4f4a",
c950: "#022f2e",
),
cyan: Palette.new(
c50: "#ecfeff",
c100: "#cefafe",
c200: "#a2f4fd",
c300: "#53eafd",
c400: "#00d3f2",
c500: "#00b8db",
c600: "#0092b8",
c700: "#007595",
c800: "#005f78",
c900: "#104e64",
c950: "#053345",
),
sky: Palette.new(
c50: "#f0f9ff",
c100: "#dff2fe",
c200: "#b8e6fe",
c300: "#74d4ff",
c400: "#00bcff",
c500: "#00a6f4",
c600: "#0084d1",
c700: "#0069a8",
c800: "#00598a",
c900: "#024a70",
c950: "#052f4a",
),
blue: Palette.new(
c50: "#eff6ff",
c100: "#dbeafe",
c200: "#bedbff",
c300: "#8ec5ff",
c400: "#51a2ff",
c500: "#2b7fff",
c600: "#155dfc",
c700: "#1447e6",
c800: "#193cb8",
c900: "#1c398e",
c950: "#162456",
),
indigo: Palette.new(
c50: "#eef2ff",
c100: "#e0e7ff",
c200: "#c6d2ff",
c300: "#a3b3ff",
c400: "#7c86ff",
c500: "#615fff",
c600: "#4f39f6",
c700: "#432dd7",
c800: "#372aac",
c900: "#312c85",
c950: "#1e1a4d",
),
violet: Palette.new(
c50: "#f5f3ff",
c100: "#ede9fe",
c200: "#ddd6ff",
c300: "#c4b4ff",
c400: "#a684ff",
c500: "#8e51ff",
c600: "#7f22fe",
c700: "#7008e7",
c800: "#5d0ec0",
c900: "#4d179a",
c950: "#2f0d68",
),
purple: Palette.new(
c50: "#faf5ff",
c100: "#f3e8ff",
c200: "#e9d4ff",
c300: "#dab2ff",
c400: "#c27aff",
c500: "#ad46ff",
c600: "#9810fa",
c700: "#8200db",
c800: "#6e11b0",
c900: "#59168b",
c950: "#3c0366",
),
fuchsia: Palette.new(
c50: "#fdf4ff",
c100: "#fae8ff",
c200: "#f6cfff",
c300: "#f4a8ff",
c400: "#ed6aff",
c500: "#e12afb",
c600: "#c800de",
c700: "#a800b7",
c800: "#8a0194",
c900: "#721378",
c950: "#4b004f",
),
pink: Palette.new(
c50: "#fdf2f8",
c100: "#fce7f3",
c200: "#fccee8",
c300: "#fda5d5",
c400: "#fb64b6",
c500: "#f6339a",
c600: "#e60076",
c700: "#c6005c",
c800: "#a3004c",
c900: "#861043",
c950: "#510424",
),
rose: Palette.new(
c50: "#fff1f2",
c100: "#ffe4e6",
c200: "#ffccd3",
c300: "#ffa1ad",
c400: "#ff637e",
c500: "#ff2056",
c600: "#ec003f",
c700: "#c70036",
c800: "#a50036",
c900: "#8b0836",
c950: "#4d0218",
),
}.freeze// Tailwind colors, see https://ansi.md.
pub const TAILWIND: TailwindColors = TailwindColors {
slate: Palette {
c50: "#f8fafc",
c100: "#f1f5f9",
c200: "#e2e8f0",
c300: "#cad5e2",
c400: "#90a1b9",
c500: "#62748e",
c600: "#45556c",
c700: "#314158",
c800: "#1d293d",
c900: "#0f172b",
c950: "#020618",
},
gray: Palette {
c50: "#f9fafb",
c100: "#f3f4f6",
c200: "#e5e7eb",
c300: "#d1d5dc",
c400: "#99a1af",
c500: "#6a7282",
c600: "#4a5565",
c700: "#364153",
c800: "#1e2939",
c900: "#101828",
c950: "#030712",
},
zinc: Palette {
c50: "#fafafa",
c100: "#f4f4f5",
c200: "#e4e4e7",
c300: "#d4d4d8",
c400: "#9f9fa9",
c500: "#71717b",
c600: "#52525c",
c700: "#3f3f46",
c800: "#27272a",
c900: "#18181b",
c950: "#09090b",
},
neutral: Palette {
c50: "#fafafa",
c100: "#f5f5f5",
c200: "#e5e5e5",
c300: "#d4d4d4",
c400: "#a1a1a1",
c500: "#737373",
c600: "#525252",
c700: "#404040",
c800: "#262626",
c900: "#171717",
c950: "#0a0a0a",
},
stone: Palette {
c50: "#fafaf9",
c100: "#f5f5f4",
c200: "#e7e5e4",
c300: "#d6d3d1",
c400: "#a6a09b",
c500: "#79716b",
c600: "#57534d",
c700: "#44403b",
c800: "#292524",
c900: "#1c1917",
c950: "#0c0a09",
},
mauve: Palette {
c50: "#fafafa",
c100: "#f3f1f3",
c200: "#e7e4e7",
c300: "#d7d0d7",
c400: "#a89ea9",
c500: "#79697b",
c600: "#594c5b",
c700: "#463947",
c800: "#2a212c",
c900: "#1d161e",
c950: "#0c090c",
},
olive: Palette {
c50: "#fbfbf9",
c100: "#f4f4f0",
c200: "#e8e8e3",
c300: "#d8d8d0",
c400: "#abab9c",
c500: "#7c7c67",
c600: "#5b5b4b",
c700: "#474739",
c800: "#2b2b22",
c900: "#1d1d16",
c950: "#0c0c09",
},
mist: Palette {
c50: "#f9fbfb",
c100: "#f1f3f3",
c200: "#e3e7e8",
c300: "#d0d6d8",
c400: "#9ca8ab",
c500: "#67787c",
c600: "#4b585b",
c700: "#394447",
c800: "#22292b",
c900: "#161b1d",
c950: "#090b0c",
},
taupe: Palette {
c50: "#fbfaf9",
c100: "#f3f1f1",
c200: "#e8e4e3",
c300: "#d8d2d0",
c400: "#aba09c",
c500: "#7c6d67",
c600: "#5b4f4b",
c700: "#473c39",
c800: "#2b2422",
c900: "#1d1816",
c950: "#0c0a09",
},
red: Palette {
c50: "#fef2f2",
c100: "#ffe2e2",
c200: "#ffc9c9",
c300: "#ffa2a2",
c400: "#ff6467",
c500: "#fb2c36",
c600: "#e7000b",
c700: "#c10007",
c800: "#9f0712",
c900: "#82181a",
c950: "#460809",
},
orange: Palette {
c50: "#fff7ed",
c100: "#ffedd4",
c200: "#ffd6a7",
c300: "#ffb86a",
c400: "#ff8904",
c500: "#ff6900",
c600: "#f54900",
c700: "#ca3500",
c800: "#9f2d00",
c900: "#7e2a0c",
c950: "#441306",
},
amber: Palette {
c50: "#fffbeb",
c100: "#fef3c6",
c200: "#fee685",
c300: "#ffd230",
c400: "#ffba00",
c500: "#fd9a00",
c600: "#e17100",
c700: "#bb4d00",
c800: "#973c00",
c900: "#7b3306",
c950: "#461901",
},
yellow: Palette {
c50: "#fefce8",
c100: "#fef9c2",
c200: "#fff085",
c300: "#ffdf20",
c400: "#fcc800",
c500: "#efb100",
c600: "#d08700",
c700: "#a65f00",
c800: "#894b00",
c900: "#733e0a",
c950: "#432004",
},
lime: Palette {
c50: "#f7fee7",
c100: "#ecfcca",
c200: "#d8f999",
c300: "#bbf451",
c400: "#9ae600",
c500: "#7ccf00",
c600: "#5ea500",
c700: "#497d00",
c800: "#3c6300",
c900: "#35530e",
c950: "#192e03",
},
green: Palette {
c50: "#f0fdf4",
c100: "#dcfce7",
c200: "#b9f8cf",
c300: "#7bf1a8",
c400: "#05df72",
c500: "#00c950",
c600: "#00a63e",
c700: "#008236",
c800: "#016630",
c900: "#0d542b",
c950: "#032e15",
},
emerald: Palette {
c50: "#ecfdf5",
c100: "#d0fae5",
c200: "#a4f4cf",
c300: "#5ee9b5",
c400: "#00d492",
c500: "#00bc7d",
c600: "#009966",
c700: "#007a55",
c800: "#006045",
c900: "#004f3b",
c950: "#002c22",
},
teal: Palette {
c50: "#f0fdfa",
c100: "#cbfbf1",
c200: "#96f7e4",
c300: "#46ecd5",
c400: "#00d5be",
c500: "#00bba7",
c600: "#009689",
c700: "#00786f",
c800: "#005f5a",
c900: "#0b4f4a",
c950: "#022f2e",
},
cyan: Palette {
c50: "#ecfeff",
c100: "#cefafe",
c200: "#a2f4fd",
c300: "#53eafd",
c400: "#00d3f2",
c500: "#00b8db",
c600: "#0092b8",
c700: "#007595",
c800: "#005f78",
c900: "#104e64",
c950: "#053345",
},
sky: Palette {
c50: "#f0f9ff",
c100: "#dff2fe",
c200: "#b8e6fe",
c300: "#74d4ff",
c400: "#00bcff",
c500: "#00a6f4",
c600: "#0084d1",
c700: "#0069a8",
c800: "#00598a",
c900: "#024a70",
c950: "#052f4a",
},
blue: Palette {
c50: "#eff6ff",
c100: "#dbeafe",
c200: "#bedbff",
c300: "#8ec5ff",
c400: "#51a2ff",
c500: "#2b7fff",
c600: "#155dfc",
c700: "#1447e6",
c800: "#193cb8",
c900: "#1c398e",
c950: "#162456",
},
indigo: Palette {
c50: "#eef2ff",
c100: "#e0e7ff",
c200: "#c6d2ff",
c300: "#a3b3ff",
c400: "#7c86ff",
c500: "#615fff",
c600: "#4f39f6",
c700: "#432dd7",
c800: "#372aac",
c900: "#312c85",
c950: "#1e1a4d",
},
violet: Palette {
c50: "#f5f3ff",
c100: "#ede9fe",
c200: "#ddd6ff",
c300: "#c4b4ff",
c400: "#a684ff",
c500: "#8e51ff",
c600: "#7f22fe",
c700: "#7008e7",
c800: "#5d0ec0",
c900: "#4d179a",
c950: "#2f0d68",
},
purple: Palette {
c50: "#faf5ff",
c100: "#f3e8ff",
c200: "#e9d4ff",
c300: "#dab2ff",
c400: "#c27aff",
c500: "#ad46ff",
c600: "#9810fa",
c700: "#8200db",
c800: "#6e11b0",
c900: "#59168b",
c950: "#3c0366",
},
fuchsia: Palette {
c50: "#fdf4ff",
c100: "#fae8ff",
c200: "#f6cfff",
c300: "#f4a8ff",
c400: "#ed6aff",
c500: "#e12afb",
c600: "#c800de",
c700: "#a800b7",
c800: "#8a0194",
c900: "#721378",
c950: "#4b004f",
},
pink: Palette {
c50: "#fdf2f8",
c100: "#fce7f3",
c200: "#fccee8",
c300: "#fda5d5",
c400: "#fb64b6",
c500: "#f6339a",
c600: "#e60076",
c700: "#c6005c",
c800: "#a3004c",
c900: "#861043",
c950: "#510424",
},
rose: Palette {
c50: "#fff1f2",
c100: "#ffe4e6",
c200: "#ffccd3",
c300: "#ffa1ad",
c400: "#ff637e",
c500: "#ff2056",
c600: "#ec003f",
c700: "#c70036",
c800: "#a50036",
c900: "#8b0836",
c950: "#4d0218",
},
};
pub struct Palette {
pub c50: &'static str,
pub c100: &'static str,
pub c200: &'static str,
pub c300: &'static str,
pub c400: &'static str,
pub c500: &'static str,
pub c600: &'static str,
pub c700: &'static str,
pub c800: &'static str,
pub c900: &'static str,
pub c950: &'static str,
}
pub struct TailwindColors {
pub slate: Palette,
pub gray: Palette,
pub zinc: Palette,
pub neutral: Palette,
pub stone: Palette,
pub mauve: Palette,
pub olive: Palette,
pub mist: Palette,
pub taupe: Palette,
pub red: Palette,
pub orange: Palette,
pub amber: Palette,
pub yellow: Palette,
pub lime: Palette,
pub green: Palette,
pub emerald: Palette,
pub teal: Palette,
pub cyan: Palette,
pub sky: Palette,
pub blue: Palette,
pub indigo: Palette,
pub violet: Palette,
pub purple: Palette,
pub fuchsia: Palette,
pub pink: Palette,
pub rose: Palette,
}// Tailwind colors, see https://ansi.md.
export const tailwind = {
slate: {
c50: "#f8fafc",
c100: "#f1f5f9",
c200: "#e2e8f0",
c300: "#cad5e2",
c400: "#90a1b9",
c500: "#62748e",
c600: "#45556c",
c700: "#314158",
c800: "#1d293d",
c900: "#0f172b",
c950: "#020618",
},
gray: {
c50: "#f9fafb",
c100: "#f3f4f6",
c200: "#e5e7eb",
c300: "#d1d5dc",
c400: "#99a1af",
c500: "#6a7282",
c600: "#4a5565",
c700: "#364153",
c800: "#1e2939",
c900: "#101828",
c950: "#030712",
},
zinc: {
c50: "#fafafa",
c100: "#f4f4f5",
c200: "#e4e4e7",
c300: "#d4d4d8",
c400: "#9f9fa9",
c500: "#71717b",
c600: "#52525c",
c700: "#3f3f46",
c800: "#27272a",
c900: "#18181b",
c950: "#09090b",
},
neutral: {
c50: "#fafafa",
c100: "#f5f5f5",
c200: "#e5e5e5",
c300: "#d4d4d4",
c400: "#a1a1a1",
c500: "#737373",
c600: "#525252",
c700: "#404040",
c800: "#262626",
c900: "#171717",
c950: "#0a0a0a",
},
stone: {
c50: "#fafaf9",
c100: "#f5f5f4",
c200: "#e7e5e4",
c300: "#d6d3d1",
c400: "#a6a09b",
c500: "#79716b",
c600: "#57534d",
c700: "#44403b",
c800: "#292524",
c900: "#1c1917",
c950: "#0c0a09",
},
mauve: {
c50: "#fafafa",
c100: "#f3f1f3",
c200: "#e7e4e7",
c300: "#d7d0d7",
c400: "#a89ea9",
c500: "#79697b",
c600: "#594c5b",
c700: "#463947",
c800: "#2a212c",
c900: "#1d161e",
c950: "#0c090c",
},
olive: {
c50: "#fbfbf9",
c100: "#f4f4f0",
c200: "#e8e8e3",
c300: "#d8d8d0",
c400: "#abab9c",
c500: "#7c7c67",
c600: "#5b5b4b",
c700: "#474739",
c800: "#2b2b22",
c900: "#1d1d16",
c950: "#0c0c09",
},
mist: {
c50: "#f9fbfb",
c100: "#f1f3f3",
c200: "#e3e7e8",
c300: "#d0d6d8",
c400: "#9ca8ab",
c500: "#67787c",
c600: "#4b585b",
c700: "#394447",
c800: "#22292b",
c900: "#161b1d",
c950: "#090b0c",
},
taupe: {
c50: "#fbfaf9",
c100: "#f3f1f1",
c200: "#e8e4e3",
c300: "#d8d2d0",
c400: "#aba09c",
c500: "#7c6d67",
c600: "#5b4f4b",
c700: "#473c39",
c800: "#2b2422",
c900: "#1d1816",
c950: "#0c0a09",
},
red: {
c50: "#fef2f2",
c100: "#ffe2e2",
c200: "#ffc9c9",
c300: "#ffa2a2",
c400: "#ff6467",
c500: "#fb2c36",
c600: "#e7000b",
c700: "#c10007",
c800: "#9f0712",
c900: "#82181a",
c950: "#460809",
},
orange: {
c50: "#fff7ed",
c100: "#ffedd4",
c200: "#ffd6a7",
c300: "#ffb86a",
c400: "#ff8904",
c500: "#ff6900",
c600: "#f54900",
c700: "#ca3500",
c800: "#9f2d00",
c900: "#7e2a0c",
c950: "#441306",
},
amber: {
c50: "#fffbeb",
c100: "#fef3c6",
c200: "#fee685",
c300: "#ffd230",
c400: "#ffba00",
c500: "#fd9a00",
c600: "#e17100",
c700: "#bb4d00",
c800: "#973c00",
c900: "#7b3306",
c950: "#461901",
},
yellow: {
c50: "#fefce8",
c100: "#fef9c2",
c200: "#fff085",
c300: "#ffdf20",
c400: "#fcc800",
c500: "#efb100",
c600: "#d08700",
c700: "#a65f00",
c800: "#894b00",
c900: "#733e0a",
c950: "#432004",
},
lime: {
c50: "#f7fee7",
c100: "#ecfcca",
c200: "#d8f999",
c300: "#bbf451",
c400: "#9ae600",
c500: "#7ccf00",
c600: "#5ea500",
c700: "#497d00",
c800: "#3c6300",
c900: "#35530e",
c950: "#192e03",
},
green: {
c50: "#f0fdf4",
c100: "#dcfce7",
c200: "#b9f8cf",
c300: "#7bf1a8",
c400: "#05df72",
c500: "#00c950",
c600: "#00a63e",
c700: "#008236",
c800: "#016630",
c900: "#0d542b",
c950: "#032e15",
},
emerald: {
c50: "#ecfdf5",
c100: "#d0fae5",
c200: "#a4f4cf",
c300: "#5ee9b5",
c400: "#00d492",
c500: "#00bc7d",
c600: "#009966",
c700: "#007a55",
c800: "#006045",
c900: "#004f3b",
c950: "#002c22",
},
teal: {
c50: "#f0fdfa",
c100: "#cbfbf1",
c200: "#96f7e4",
c300: "#46ecd5",
c400: "#00d5be",
c500: "#00bba7",
c600: "#009689",
c700: "#00786f",
c800: "#005f5a",
c900: "#0b4f4a",
c950: "#022f2e",
},
cyan: {
c50: "#ecfeff",
c100: "#cefafe",
c200: "#a2f4fd",
c300: "#53eafd",
c400: "#00d3f2",
c500: "#00b8db",
c600: "#0092b8",
c700: "#007595",
c800: "#005f78",
c900: "#104e64",
c950: "#053345",
},
sky: {
c50: "#f0f9ff",
c100: "#dff2fe",
c200: "#b8e6fe",
c300: "#74d4ff",
c400: "#00bcff",
c500: "#00a6f4",
c600: "#0084d1",
c700: "#0069a8",
c800: "#00598a",
c900: "#024a70",
c950: "#052f4a",
},
blue: {
c50: "#eff6ff",
c100: "#dbeafe",
c200: "#bedbff",
c300: "#8ec5ff",
c400: "#51a2ff",
c500: "#2b7fff",
c600: "#155dfc",
c700: "#1447e6",
c800: "#193cb8",
c900: "#1c398e",
c950: "#162456",
},
indigo: {
c50: "#eef2ff",
c100: "#e0e7ff",
c200: "#c6d2ff",
c300: "#a3b3ff",
c400: "#7c86ff",
c500: "#615fff",
c600: "#4f39f6",
c700: "#432dd7",
c800: "#372aac",
c900: "#312c85",
c950: "#1e1a4d",
},
violet: {
c50: "#f5f3ff",
c100: "#ede9fe",
c200: "#ddd6ff",
c300: "#c4b4ff",
c400: "#a684ff",
c500: "#8e51ff",
c600: "#7f22fe",
c700: "#7008e7",
c800: "#5d0ec0",
c900: "#4d179a",
c950: "#2f0d68",
},
purple: {
c50: "#faf5ff",
c100: "#f3e8ff",
c200: "#e9d4ff",
c300: "#dab2ff",
c400: "#c27aff",
c500: "#ad46ff",
c600: "#9810fa",
c700: "#8200db",
c800: "#6e11b0",
c900: "#59168b",
c950: "#3c0366",
},
fuchsia: {
c50: "#fdf4ff",
c100: "#fae8ff",
c200: "#f6cfff",
c300: "#f4a8ff",
c400: "#ed6aff",
c500: "#e12afb",
c600: "#c800de",
c700: "#a800b7",
c800: "#8a0194",
c900: "#721378",
c950: "#4b004f",
},
pink: {
c50: "#fdf2f8",
c100: "#fce7f3",
c200: "#fccee8",
c300: "#fda5d5",
c400: "#fb64b6",
c500: "#f6339a",
c600: "#e60076",
c700: "#c6005c",
c800: "#a3004c",
c900: "#861043",
c950: "#510424",
},
rose: {
c50: "#fff1f2",
c100: "#ffe4e6",
c200: "#ffccd3",
c300: "#ffa1ad",
c400: "#ff637e",
c500: "#ff2056",
c600: "#ec003f",
c700: "#c70036",
c800: "#a50036",
c900: "#8b0836",
c950: "#4d0218",
},
} as const;// Tailwind colors, see https://ansi.md.
pub const tailwind = TailwindColors{
.slate = .{
.c50 = "#f8fafc",
.c100 = "#f1f5f9",
.c200 = "#e2e8f0",
.c300 = "#cad5e2",
.c400 = "#90a1b9",
.c500 = "#62748e",
.c600 = "#45556c",
.c700 = "#314158",
.c800 = "#1d293d",
.c900 = "#0f172b",
.c950 = "#020618",
},
.gray = .{
.c50 = "#f9fafb",
.c100 = "#f3f4f6",
.c200 = "#e5e7eb",
.c300 = "#d1d5dc",
.c400 = "#99a1af",
.c500 = "#6a7282",
.c600 = "#4a5565",
.c700 = "#364153",
.c800 = "#1e2939",
.c900 = "#101828",
.c950 = "#030712",
},
.zinc = .{
.c50 = "#fafafa",
.c100 = "#f4f4f5",
.c200 = "#e4e4e7",
.c300 = "#d4d4d8",
.c400 = "#9f9fa9",
.c500 = "#71717b",
.c600 = "#52525c",
.c700 = "#3f3f46",
.c800 = "#27272a",
.c900 = "#18181b",
.c950 = "#09090b",
},
.neutral = .{
.c50 = "#fafafa",
.c100 = "#f5f5f5",
.c200 = "#e5e5e5",
.c300 = "#d4d4d4",
.c400 = "#a1a1a1",
.c500 = "#737373",
.c600 = "#525252",
.c700 = "#404040",
.c800 = "#262626",
.c900 = "#171717",
.c950 = "#0a0a0a",
},
.stone = .{
.c50 = "#fafaf9",
.c100 = "#f5f5f4",
.c200 = "#e7e5e4",
.c300 = "#d6d3d1",
.c400 = "#a6a09b",
.c500 = "#79716b",
.c600 = "#57534d",
.c700 = "#44403b",
.c800 = "#292524",
.c900 = "#1c1917",
.c950 = "#0c0a09",
},
.mauve = .{
.c50 = "#fafafa",
.c100 = "#f3f1f3",
.c200 = "#e7e4e7",
.c300 = "#d7d0d7",
.c400 = "#a89ea9",
.c500 = "#79697b",
.c600 = "#594c5b",
.c700 = "#463947",
.c800 = "#2a212c",
.c900 = "#1d161e",
.c950 = "#0c090c",
},
.olive = .{
.c50 = "#fbfbf9",
.c100 = "#f4f4f0",
.c200 = "#e8e8e3",
.c300 = "#d8d8d0",
.c400 = "#abab9c",
.c500 = "#7c7c67",
.c600 = "#5b5b4b",
.c700 = "#474739",
.c800 = "#2b2b22",
.c900 = "#1d1d16",
.c950 = "#0c0c09",
},
.mist = .{
.c50 = "#f9fbfb",
.c100 = "#f1f3f3",
.c200 = "#e3e7e8",
.c300 = "#d0d6d8",
.c400 = "#9ca8ab",
.c500 = "#67787c",
.c600 = "#4b585b",
.c700 = "#394447",
.c800 = "#22292b",
.c900 = "#161b1d",
.c950 = "#090b0c",
},
.taupe = .{
.c50 = "#fbfaf9",
.c100 = "#f3f1f1",
.c200 = "#e8e4e3",
.c300 = "#d8d2d0",
.c400 = "#aba09c",
.c500 = "#7c6d67",
.c600 = "#5b4f4b",
.c700 = "#473c39",
.c800 = "#2b2422",
.c900 = "#1d1816",
.c950 = "#0c0a09",
},
.red = .{
.c50 = "#fef2f2",
.c100 = "#ffe2e2",
.c200 = "#ffc9c9",
.c300 = "#ffa2a2",
.c400 = "#ff6467",
.c500 = "#fb2c36",
.c600 = "#e7000b",
.c700 = "#c10007",
.c800 = "#9f0712",
.c900 = "#82181a",
.c950 = "#460809",
},
.orange = .{
.c50 = "#fff7ed",
.c100 = "#ffedd4",
.c200 = "#ffd6a7",
.c300 = "#ffb86a",
.c400 = "#ff8904",
.c500 = "#ff6900",
.c600 = "#f54900",
.c700 = "#ca3500",
.c800 = "#9f2d00",
.c900 = "#7e2a0c",
.c950 = "#441306",
},
.amber = .{
.c50 = "#fffbeb",
.c100 = "#fef3c6",
.c200 = "#fee685",
.c300 = "#ffd230",
.c400 = "#ffba00",
.c500 = "#fd9a00",
.c600 = "#e17100",
.c700 = "#bb4d00",
.c800 = "#973c00",
.c900 = "#7b3306",
.c950 = "#461901",
},
.yellow = .{
.c50 = "#fefce8",
.c100 = "#fef9c2",
.c200 = "#fff085",
.c300 = "#ffdf20",
.c400 = "#fcc800",
.c500 = "#efb100",
.c600 = "#d08700",
.c700 = "#a65f00",
.c800 = "#894b00",
.c900 = "#733e0a",
.c950 = "#432004",
},
.lime = .{
.c50 = "#f7fee7",
.c100 = "#ecfcca",
.c200 = "#d8f999",
.c300 = "#bbf451",
.c400 = "#9ae600",
.c500 = "#7ccf00",
.c600 = "#5ea500",
.c700 = "#497d00",
.c800 = "#3c6300",
.c900 = "#35530e",
.c950 = "#192e03",
},
.green = .{
.c50 = "#f0fdf4",
.c100 = "#dcfce7",
.c200 = "#b9f8cf",
.c300 = "#7bf1a8",
.c400 = "#05df72",
.c500 = "#00c950",
.c600 = "#00a63e",
.c700 = "#008236",
.c800 = "#016630",
.c900 = "#0d542b",
.c950 = "#032e15",
},
.emerald = .{
.c50 = "#ecfdf5",
.c100 = "#d0fae5",
.c200 = "#a4f4cf",
.c300 = "#5ee9b5",
.c400 = "#00d492",
.c500 = "#00bc7d",
.c600 = "#009966",
.c700 = "#007a55",
.c800 = "#006045",
.c900 = "#004f3b",
.c950 = "#002c22",
},
.teal = .{
.c50 = "#f0fdfa",
.c100 = "#cbfbf1",
.c200 = "#96f7e4",
.c300 = "#46ecd5",
.c400 = "#00d5be",
.c500 = "#00bba7",
.c600 = "#009689",
.c700 = "#00786f",
.c800 = "#005f5a",
.c900 = "#0b4f4a",
.c950 = "#022f2e",
},
.cyan = .{
.c50 = "#ecfeff",
.c100 = "#cefafe",
.c200 = "#a2f4fd",
.c300 = "#53eafd",
.c400 = "#00d3f2",
.c500 = "#00b8db",
.c600 = "#0092b8",
.c700 = "#007595",
.c800 = "#005f78",
.c900 = "#104e64",
.c950 = "#053345",
},
.sky = .{
.c50 = "#f0f9ff",
.c100 = "#dff2fe",
.c200 = "#b8e6fe",
.c300 = "#74d4ff",
.c400 = "#00bcff",
.c500 = "#00a6f4",
.c600 = "#0084d1",
.c700 = "#0069a8",
.c800 = "#00598a",
.c900 = "#024a70",
.c950 = "#052f4a",
},
.blue = .{
.c50 = "#eff6ff",
.c100 = "#dbeafe",
.c200 = "#bedbff",
.c300 = "#8ec5ff",
.c400 = "#51a2ff",
.c500 = "#2b7fff",
.c600 = "#155dfc",
.c700 = "#1447e6",
.c800 = "#193cb8",
.c900 = "#1c398e",
.c950 = "#162456",
},
.indigo = .{
.c50 = "#eef2ff",
.c100 = "#e0e7ff",
.c200 = "#c6d2ff",
.c300 = "#a3b3ff",
.c400 = "#7c86ff",
.c500 = "#615fff",
.c600 = "#4f39f6",
.c700 = "#432dd7",
.c800 = "#372aac",
.c900 = "#312c85",
.c950 = "#1e1a4d",
},
.violet = .{
.c50 = "#f5f3ff",
.c100 = "#ede9fe",
.c200 = "#ddd6ff",
.c300 = "#c4b4ff",
.c400 = "#a684ff",
.c500 = "#8e51ff",
.c600 = "#7f22fe",
.c700 = "#7008e7",
.c800 = "#5d0ec0",
.c900 = "#4d179a",
.c950 = "#2f0d68",
},
.purple = .{
.c50 = "#faf5ff",
.c100 = "#f3e8ff",
.c200 = "#e9d4ff",
.c300 = "#dab2ff",
.c400 = "#c27aff",
.c500 = "#ad46ff",
.c600 = "#9810fa",
.c700 = "#8200db",
.c800 = "#6e11b0",
.c900 = "#59168b",
.c950 = "#3c0366",
},
.fuchsia = .{
.c50 = "#fdf4ff",
.c100 = "#fae8ff",
.c200 = "#f6cfff",
.c300 = "#f4a8ff",
.c400 = "#ed6aff",
.c500 = "#e12afb",
.c600 = "#c800de",
.c700 = "#a800b7",
.c800 = "#8a0194",
.c900 = "#721378",
.c950 = "#4b004f",
},
.pink = .{
.c50 = "#fdf2f8",
.c100 = "#fce7f3",
.c200 = "#fccee8",
.c300 = "#fda5d5",
.c400 = "#fb64b6",
.c500 = "#f6339a",
.c600 = "#e60076",
.c700 = "#c6005c",
.c800 = "#a3004c",
.c900 = "#861043",
.c950 = "#510424",
},
.rose = .{
.c50 = "#fff1f2",
.c100 = "#ffe4e6",
.c200 = "#ffccd3",
.c300 = "#ffa1ad",
.c400 = "#ff637e",
.c500 = "#ff2056",
.c600 = "#ec003f",
.c700 = "#c70036",
.c800 = "#a50036",
.c900 = "#8b0836",
.c950 = "#4d0218",
},
};
pub const Palette = struct {
c50: []const u8,
c100: []const u8,
c200: []const u8,
c300: []const u8,
c400: []const u8,
c500: []const u8,
c600: []const u8,
c700: []const u8,
c800: []const u8,
c900: []const u8,
c950: []const u8,
};
pub const TailwindColors = struct {
slate: Palette,
gray: Palette,
zinc: Palette,
neutral: Palette,
stone: Palette,
mauve: Palette,
olive: Palette,
mist: Palette,
taupe: Palette,
red: Palette,
orange: Palette,
amber: Palette,
yellow: Palette,
lime: Palette,
green: Palette,
emerald: Palette,
teal: Palette,
cyan: Palette,
sky: Palette,
blue: Palette,
indigo: Palette,
violet: Palette,
purple: Palette,
fuchsia: Palette,
pink: Palette,
rose: Palette,
};Catppuccin
These days I use Catppuccin Frappe as my terminal theme and I like sneaking these colors into various places. For example, I use One Dark Pro in zed but I like it better with some Catppuccin Green in there for visibility:
Here is Catppuccin for popular languages:
// Catppuccin colors, see https://ansi.md.
var Catppuccin = CatppuccinColors{
Latte: Palette{
Rosewater: "#dc8a78",
Flamingo: "#dd7878",
Pink: "#ea76cb",
Mauve: "#8839ef",
Red: "#d20f39",
Maroon: "#e64553",
Peach: "#fe640b",
Yellow: "#df8e1d",
Green: "#40a02b",
Teal: "#179299",
Sky: "#04a5e5",
Sapphire: "#209fb5",
Blue: "#1e66f5",
Lavender: "#7287fd",
Text: "#4c4f69",
Subtext1: "#5c5f77",
Subtext0: "#6c6f85",
Overlay2: "#7c7f93",
Overlay1: "#8c8fa1",
Overlay0: "#9ca0b0",
Surface2: "#acb0be",
Surface1: "#bcc0cc",
Surface0: "#ccd0da",
Base: "#eff1f5",
Mantle: "#e6e9ef",
Crust: "#dce0e8",
},
Frappe: Palette{
Rosewater: "#f2d5cf",
Flamingo: "#eebebe",
Pink: "#f4b8e4",
Mauve: "#ca9ee6",
Red: "#e78284",
Maroon: "#ea999c",
Peach: "#ef9f76",
Yellow: "#e5c890",
Green: "#a6d189",
Teal: "#81c8be",
Sky: "#99d1db",
Sapphire: "#85c1dc",
Blue: "#8caaee",
Lavender: "#babbf1",
Text: "#c6d0f5",
Subtext1: "#b5bfe2",
Subtext0: "#a5adce",
Overlay2: "#949cbb",
Overlay1: "#838ba7",
Overlay0: "#737994",
Surface2: "#626880",
Surface1: "#51576d",
Surface0: "#414559",
Base: "#303446",
Mantle: "#292c3c",
Crust: "#232634",
},
Macchiato: Palette{
Rosewater: "#f4dbd6",
Flamingo: "#f0c6c6",
Pink: "#f5bde6",
Mauve: "#c6a0f6",
Red: "#ed8796",
Maroon: "#ee99a0",
Peach: "#f5a97f",
Yellow: "#eed49f",
Green: "#a6da95",
Teal: "#8bd5ca",
Sky: "#91d7e3",
Sapphire: "#7dc4e4",
Blue: "#8aadf4",
Lavender: "#b7bdf8",
Text: "#cad3f5",
Subtext1: "#b8c0e0",
Subtext0: "#a5adcb",
Overlay2: "#939ab7",
Overlay1: "#8087a2",
Overlay0: "#6e738d",
Surface2: "#5b6078",
Surface1: "#494d64",
Surface0: "#363a4f",
Base: "#24273a",
Mantle: "#1e2030",
Crust: "#181926",
},
Mocha: Palette{
Rosewater: "#f5e0dc",
Flamingo: "#f2cdcd",
Pink: "#f5c2e7",
Mauve: "#cba6f7",
Red: "#f38ba8",
Maroon: "#eba0ac",
Peach: "#fab387",
Yellow: "#f9e2af",
Green: "#a6e3a1",
Teal: "#94e2d5",
Sky: "#89dceb",
Sapphire: "#74c7ec",
Blue: "#89b4fa",
Lavender: "#b4befe",
Text: "#cdd6f4",
Subtext1: "#bac2de",
Subtext0: "#a6adc8",
Overlay2: "#9399b2",
Overlay1: "#7f849c",
Overlay0: "#6c7086",
Surface2: "#585b70",
Surface1: "#45475a",
Surface0: "#313244",
Base: "#1e1e2e",
Mantle: "#181825",
Crust: "#11111b",
},
}
type CatppuccinColors struct {
Latte Palette
Frappe Palette
Macchiato Palette
Mocha Palette
}
type Palette struct {
Rosewater string
Flamingo string
Pink string
Mauve string
Red string
Maroon string
Peach string
Yellow string
Green string
Teal string
Sky string
Sapphire string
Blue string
Lavender string
Text string
Subtext1 string
Subtext0 string
Overlay2 string
Overlay1 string
Overlay0 string
Surface2 string
Surface1 string
Surface0 string
Base string
Mantle string
Crust string
}{
"latte": {
"rosewater": "#dc8a78",
"flamingo": "#dd7878",
"pink": "#ea76cb",
"mauve": "#8839ef",
"red": "#d20f39",
"maroon": "#e64553",
"peach": "#fe640b",
"yellow": "#df8e1d",
"green": "#40a02b",
"teal": "#179299",
"sky": "#04a5e5",
"sapphire": "#209fb5",
"blue": "#1e66f5",
"lavender": "#7287fd",
"text": "#4c4f69",
"subtext1": "#5c5f77",
"subtext0": "#6c6f85",
"overlay2": "#7c7f93",
"overlay1": "#8c8fa1",
"overlay0": "#9ca0b0",
"surface2": "#acb0be",
"surface1": "#bcc0cc",
"surface0": "#ccd0da",
"base": "#eff1f5",
"mantle": "#e6e9ef",
"crust": "#dce0e8"
},
"frappe": {
"rosewater": "#f2d5cf",
"flamingo": "#eebebe",
"pink": "#f4b8e4",
"mauve": "#ca9ee6",
"red": "#e78284",
"maroon": "#ea999c",
"peach": "#ef9f76",
"yellow": "#e5c890",
"green": "#a6d189",
"teal": "#81c8be",
"sky": "#99d1db",
"sapphire": "#85c1dc",
"blue": "#8caaee",
"lavender": "#babbf1",
"text": "#c6d0f5",
"subtext1": "#b5bfe2",
"subtext0": "#a5adce",
"overlay2": "#949cbb",
"overlay1": "#838ba7",
"overlay0": "#737994",
"surface2": "#626880",
"surface1": "#51576d",
"surface0": "#414559",
"base": "#303446",
"mantle": "#292c3c",
"crust": "#232634"
},
"macchiato": {
"rosewater": "#f4dbd6",
"flamingo": "#f0c6c6",
"pink": "#f5bde6",
"mauve": "#c6a0f6",
"red": "#ed8796",
"maroon": "#ee99a0",
"peach": "#f5a97f",
"yellow": "#eed49f",
"green": "#a6da95",
"teal": "#8bd5ca",
"sky": "#91d7e3",
"sapphire": "#7dc4e4",
"blue": "#8aadf4",
"lavender": "#b7bdf8",
"text": "#cad3f5",
"subtext1": "#b8c0e0",
"subtext0": "#a5adcb",
"overlay2": "#939ab7",
"overlay1": "#8087a2",
"overlay0": "#6e738d",
"surface2": "#5b6078",
"surface1": "#494d64",
"surface0": "#363a4f",
"base": "#24273a",
"mantle": "#1e2030",
"crust": "#181926"
},
"mocha": {
"rosewater": "#f5e0dc",
"flamingo": "#f2cdcd",
"pink": "#f5c2e7",
"mauve": "#cba6f7",
"red": "#f38ba8",
"maroon": "#eba0ac",
"peach": "#fab387",
"yellow": "#f9e2af",
"green": "#a6e3a1",
"teal": "#94e2d5",
"sky": "#89dceb",
"sapphire": "#74c7ec",
"blue": "#89b4fa",
"lavender": "#b4befe",
"text": "#cdd6f4",
"subtext1": "#bac2de",
"subtext0": "#a6adc8",
"overlay2": "#9399b2",
"overlay1": "#7f849c",
"overlay0": "#6c7086",
"surface2": "#585b70",
"surface1": "#45475a",
"surface0": "#313244",
"base": "#1e1e2e",
"mantle": "#181825",
"crust": "#11111b"
}
}# Catppuccin colors, see https://ansi.md.
CATPPUCCIN: dict[str, dict[str, str]] = {
"latte": {
"rosewater": "#dc8a78",
"flamingo": "#dd7878",
"pink": "#ea76cb",
"mauve": "#8839ef",
"red": "#d20f39",
"maroon": "#e64553",
"peach": "#fe640b",
"yellow": "#df8e1d",
"green": "#40a02b",
"teal": "#179299",
"sky": "#04a5e5",
"sapphire": "#209fb5",
"blue": "#1e66f5",
"lavender": "#7287fd",
"text": "#4c4f69",
"subtext1": "#5c5f77",
"subtext0": "#6c6f85",
"overlay2": "#7c7f93",
"overlay1": "#8c8fa1",
"overlay0": "#9ca0b0",
"surface2": "#acb0be",
"surface1": "#bcc0cc",
"surface0": "#ccd0da",
"base": "#eff1f5",
"mantle": "#e6e9ef",
"crust": "#dce0e8",
},
"frappe": {
"rosewater": "#f2d5cf",
"flamingo": "#eebebe",
"pink": "#f4b8e4",
"mauve": "#ca9ee6",
"red": "#e78284",
"maroon": "#ea999c",
"peach": "#ef9f76",
"yellow": "#e5c890",
"green": "#a6d189",
"teal": "#81c8be",
"sky": "#99d1db",
"sapphire": "#85c1dc",
"blue": "#8caaee",
"lavender": "#babbf1",
"text": "#c6d0f5",
"subtext1": "#b5bfe2",
"subtext0": "#a5adce",
"overlay2": "#949cbb",
"overlay1": "#838ba7",
"overlay0": "#737994",
"surface2": "#626880",
"surface1": "#51576d",
"surface0": "#414559",
"base": "#303446",
"mantle": "#292c3c",
"crust": "#232634",
},
"macchiato": {
"rosewater": "#f4dbd6",
"flamingo": "#f0c6c6",
"pink": "#f5bde6",
"mauve": "#c6a0f6",
"red": "#ed8796",
"maroon": "#ee99a0",
"peach": "#f5a97f",
"yellow": "#eed49f",
"green": "#a6da95",
"teal": "#8bd5ca",
"sky": "#91d7e3",
"sapphire": "#7dc4e4",
"blue": "#8aadf4",
"lavender": "#b7bdf8",
"text": "#cad3f5",
"subtext1": "#b8c0e0",
"subtext0": "#a5adcb",
"overlay2": "#939ab7",
"overlay1": "#8087a2",
"overlay0": "#6e738d",
"surface2": "#5b6078",
"surface1": "#494d64",
"surface0": "#363a4f",
"base": "#24273a",
"mantle": "#1e2030",
"crust": "#181926",
},
"mocha": {
"rosewater": "#f5e0dc",
"flamingo": "#f2cdcd",
"pink": "#f5c2e7",
"mauve": "#cba6f7",
"red": "#f38ba8",
"maroon": "#eba0ac",
"peach": "#fab387",
"yellow": "#f9e2af",
"green": "#a6e3a1",
"teal": "#94e2d5",
"sky": "#89dceb",
"sapphire": "#74c7ec",
"blue": "#89b4fa",
"lavender": "#b4befe",
"text": "#cdd6f4",
"subtext1": "#bac2de",
"subtext0": "#a6adc8",
"overlay2": "#9399b2",
"overlay1": "#7f849c",
"overlay0": "#6c7086",
"surface2": "#585b70",
"surface1": "#45475a",
"surface0": "#313244",
"base": "#1e1e2e",
"mantle": "#181825",
"crust": "#11111b",
},
}# Catppuccin colors, see https://ansi.md.
Palette = Data.define(*%i[
rosewater flamingo pink mauve red maroon peach yellow green teal sky
sapphire blue lavender text subtext1 subtext0 overlay2 overlay1
overlay0 surface2 surface1 surface0 base mantle crust
])
CATPPUCCIN = {
latte: Palette.new(
rosewater: "#dc8a78",
flamingo: "#dd7878",
pink: "#ea76cb",
mauve: "#8839ef",
red: "#d20f39",
maroon: "#e64553",
peach: "#fe640b",
yellow: "#df8e1d",
green: "#40a02b",
teal: "#179299",
sky: "#04a5e5",
sapphire: "#209fb5",
blue: "#1e66f5",
lavender: "#7287fd",
text: "#4c4f69",
subtext1: "#5c5f77",
subtext0: "#6c6f85",
overlay2: "#7c7f93",
overlay1: "#8c8fa1",
overlay0: "#9ca0b0",
surface2: "#acb0be",
surface1: "#bcc0cc",
surface0: "#ccd0da",
base: "#eff1f5",
mantle: "#e6e9ef",
crust: "#dce0e8",
),
frappe: Palette.new(
rosewater: "#f2d5cf",
flamingo: "#eebebe",
pink: "#f4b8e4",
mauve: "#ca9ee6",
red: "#e78284",
maroon: "#ea999c",
peach: "#ef9f76",
yellow: "#e5c890",
green: "#a6d189",
teal: "#81c8be",
sky: "#99d1db",
sapphire: "#85c1dc",
blue: "#8caaee",
lavender: "#babbf1",
text: "#c6d0f5",
subtext1: "#b5bfe2",
subtext0: "#a5adce",
overlay2: "#949cbb",
overlay1: "#838ba7",
overlay0: "#737994",
surface2: "#626880",
surface1: "#51576d",
surface0: "#414559",
base: "#303446",
mantle: "#292c3c",
crust: "#232634",
),
macchiato: Palette.new(
rosewater: "#f4dbd6",
flamingo: "#f0c6c6",
pink: "#f5bde6",
mauve: "#c6a0f6",
red: "#ed8796",
maroon: "#ee99a0",
peach: "#f5a97f",
yellow: "#eed49f",
green: "#a6da95",
teal: "#8bd5ca",
sky: "#91d7e3",
sapphire: "#7dc4e4",
blue: "#8aadf4",
lavender: "#b7bdf8",
text: "#cad3f5",
subtext1: "#b8c0e0",
subtext0: "#a5adcb",
overlay2: "#939ab7",
overlay1: "#8087a2",
overlay0: "#6e738d",
surface2: "#5b6078",
surface1: "#494d64",
surface0: "#363a4f",
base: "#24273a",
mantle: "#1e2030",
crust: "#181926",
),
mocha: Palette.new(
rosewater: "#f5e0dc",
flamingo: "#f2cdcd",
pink: "#f5c2e7",
mauve: "#cba6f7",
red: "#f38ba8",
maroon: "#eba0ac",
peach: "#fab387",
yellow: "#f9e2af",
green: "#a6e3a1",
teal: "#94e2d5",
sky: "#89dceb",
sapphire: "#74c7ec",
blue: "#89b4fa",
lavender: "#b4befe",
text: "#cdd6f4",
subtext1: "#bac2de",
subtext0: "#a6adc8",
overlay2: "#9399b2",
overlay1: "#7f849c",
overlay0: "#6c7086",
surface2: "#585b70",
surface1: "#45475a",
surface0: "#313244",
base: "#1e1e2e",
mantle: "#181825",
crust: "#11111b",
),
}.freeze// Catppuccin colors, see https://ansi.md.
pub const CATPPUCCIN: CatppuccinColors = CatppuccinColors {
latte: Palette {
rosewater: "#dc8a78",
flamingo: "#dd7878",
pink: "#ea76cb",
mauve: "#8839ef",
red: "#d20f39",
maroon: "#e64553",
peach: "#fe640b",
yellow: "#df8e1d",
green: "#40a02b",
teal: "#179299",
sky: "#04a5e5",
sapphire: "#209fb5",
blue: "#1e66f5",
lavender: "#7287fd",
text: "#4c4f69",
subtext1: "#5c5f77",
subtext0: "#6c6f85",
overlay2: "#7c7f93",
overlay1: "#8c8fa1",
overlay0: "#9ca0b0",
surface2: "#acb0be",
surface1: "#bcc0cc",
surface0: "#ccd0da",
base: "#eff1f5",
mantle: "#e6e9ef",
crust: "#dce0e8",
},
frappe: Palette {
rosewater: "#f2d5cf",
flamingo: "#eebebe",
pink: "#f4b8e4",
mauve: "#ca9ee6",
red: "#e78284",
maroon: "#ea999c",
peach: "#ef9f76",
yellow: "#e5c890",
green: "#a6d189",
teal: "#81c8be",
sky: "#99d1db",
sapphire: "#85c1dc",
blue: "#8caaee",
lavender: "#babbf1",
text: "#c6d0f5",
subtext1: "#b5bfe2",
subtext0: "#a5adce",
overlay2: "#949cbb",
overlay1: "#838ba7",
overlay0: "#737994",
surface2: "#626880",
surface1: "#51576d",
surface0: "#414559",
base: "#303446",
mantle: "#292c3c",
crust: "#232634",
},
macchiato: Palette {
rosewater: "#f4dbd6",
flamingo: "#f0c6c6",
pink: "#f5bde6",
mauve: "#c6a0f6",
red: "#ed8796",
maroon: "#ee99a0",
peach: "#f5a97f",
yellow: "#eed49f",
green: "#a6da95",
teal: "#8bd5ca",
sky: "#91d7e3",
sapphire: "#7dc4e4",
blue: "#8aadf4",
lavender: "#b7bdf8",
text: "#cad3f5",
subtext1: "#b8c0e0",
subtext0: "#a5adcb",
overlay2: "#939ab7",
overlay1: "#8087a2",
overlay0: "#6e738d",
surface2: "#5b6078",
surface1: "#494d64",
surface0: "#363a4f",
base: "#24273a",
mantle: "#1e2030",
crust: "#181926",
},
mocha: Palette {
rosewater: "#f5e0dc",
flamingo: "#f2cdcd",
pink: "#f5c2e7",
mauve: "#cba6f7",
red: "#f38ba8",
maroon: "#eba0ac",
peach: "#fab387",
yellow: "#f9e2af",
green: "#a6e3a1",
teal: "#94e2d5",
sky: "#89dceb",
sapphire: "#74c7ec",
blue: "#89b4fa",
lavender: "#b4befe",
text: "#cdd6f4",
subtext1: "#bac2de",
subtext0: "#a6adc8",
overlay2: "#9399b2",
overlay1: "#7f849c",
overlay0: "#6c7086",
surface2: "#585b70",
surface1: "#45475a",
surface0: "#313244",
base: "#1e1e2e",
mantle: "#181825",
crust: "#11111b",
},
};
pub struct Palette {
pub rosewater: &'static str,
pub flamingo: &'static str,
pub pink: &'static str,
pub mauve: &'static str,
pub red: &'static str,
pub maroon: &'static str,
pub peach: &'static str,
pub yellow: &'static str,
pub green: &'static str,
pub teal: &'static str,
pub sky: &'static str,
pub sapphire: &'static str,
pub blue: &'static str,
pub lavender: &'static str,
pub text: &'static str,
pub subtext1: &'static str,
pub subtext0: &'static str,
pub overlay2: &'static str,
pub overlay1: &'static str,
pub overlay0: &'static str,
pub surface2: &'static str,
pub surface1: &'static str,
pub surface0: &'static str,
pub base: &'static str,
pub mantle: &'static str,
pub crust: &'static str,
}
pub struct CatppuccinColors {
pub latte: Palette,
pub frappe: Palette,
pub macchiato: Palette,
pub mocha: Palette,
}// Catppuccin colors, see https://ansi.md.
export const catppuccin = {
latte: {
rosewater: "#dc8a78",
flamingo: "#dd7878",
pink: "#ea76cb",
mauve: "#8839ef",
red: "#d20f39",
maroon: "#e64553",
peach: "#fe640b",
yellow: "#df8e1d",
green: "#40a02b",
teal: "#179299",
sky: "#04a5e5",
sapphire: "#209fb5",
blue: "#1e66f5",
lavender: "#7287fd",
text: "#4c4f69",
subtext1: "#5c5f77",
subtext0: "#6c6f85",
overlay2: "#7c7f93",
overlay1: "#8c8fa1",
overlay0: "#9ca0b0",
surface2: "#acb0be",
surface1: "#bcc0cc",
surface0: "#ccd0da",
base: "#eff1f5",
mantle: "#e6e9ef",
crust: "#dce0e8",
},
frappe: {
rosewater: "#f2d5cf",
flamingo: "#eebebe",
pink: "#f4b8e4",
mauve: "#ca9ee6",
red: "#e78284",
maroon: "#ea999c",
peach: "#ef9f76",
yellow: "#e5c890",
green: "#a6d189",
teal: "#81c8be",
sky: "#99d1db",
sapphire: "#85c1dc",
blue: "#8caaee",
lavender: "#babbf1",
text: "#c6d0f5",
subtext1: "#b5bfe2",
subtext0: "#a5adce",
overlay2: "#949cbb",
overlay1: "#838ba7",
overlay0: "#737994",
surface2: "#626880",
surface1: "#51576d",
surface0: "#414559",
base: "#303446",
mantle: "#292c3c",
crust: "#232634",
},
macchiato: {
rosewater: "#f4dbd6",
flamingo: "#f0c6c6",
pink: "#f5bde6",
mauve: "#c6a0f6",
red: "#ed8796",
maroon: "#ee99a0",
peach: "#f5a97f",
yellow: "#eed49f",
green: "#a6da95",
teal: "#8bd5ca",
sky: "#91d7e3",
sapphire: "#7dc4e4",
blue: "#8aadf4",
lavender: "#b7bdf8",
text: "#cad3f5",
subtext1: "#b8c0e0",
subtext0: "#a5adcb",
overlay2: "#939ab7",
overlay1: "#8087a2",
overlay0: "#6e738d",
surface2: "#5b6078",
surface1: "#494d64",
surface0: "#363a4f",
base: "#24273a",
mantle: "#1e2030",
crust: "#181926",
},
mocha: {
rosewater: "#f5e0dc",
flamingo: "#f2cdcd",
pink: "#f5c2e7",
mauve: "#cba6f7",
red: "#f38ba8",
maroon: "#eba0ac",
peach: "#fab387",
yellow: "#f9e2af",
green: "#a6e3a1",
teal: "#94e2d5",
sky: "#89dceb",
sapphire: "#74c7ec",
blue: "#89b4fa",
lavender: "#b4befe",
text: "#cdd6f4",
subtext1: "#bac2de",
subtext0: "#a6adc8",
overlay2: "#9399b2",
overlay1: "#7f849c",
overlay0: "#6c7086",
surface2: "#585b70",
surface1: "#45475a",
surface0: "#313244",
base: "#1e1e2e",
mantle: "#181825",
crust: "#11111b",
},
} as const;// Catppuccin colors, see https://ansi.md.
pub const catppuccin = CatppuccinColors{
.latte = .{
.rosewater = "#dc8a78",
.flamingo = "#dd7878",
.pink = "#ea76cb",
.mauve = "#8839ef",
.red = "#d20f39",
.maroon = "#e64553",
.peach = "#fe640b",
.yellow = "#df8e1d",
.green = "#40a02b",
.teal = "#179299",
.sky = "#04a5e5",
.sapphire = "#209fb5",
.blue = "#1e66f5",
.lavender = "#7287fd",
.text = "#4c4f69",
.subtext1 = "#5c5f77",
.subtext0 = "#6c6f85",
.overlay2 = "#7c7f93",
.overlay1 = "#8c8fa1",
.overlay0 = "#9ca0b0",
.surface2 = "#acb0be",
.surface1 = "#bcc0cc",
.surface0 = "#ccd0da",
.base = "#eff1f5",
.mantle = "#e6e9ef",
.crust = "#dce0e8",
},
.frappe = .{
.rosewater = "#f2d5cf",
.flamingo = "#eebebe",
.pink = "#f4b8e4",
.mauve = "#ca9ee6",
.red = "#e78284",
.maroon = "#ea999c",
.peach = "#ef9f76",
.yellow = "#e5c890",
.green = "#a6d189",
.teal = "#81c8be",
.sky = "#99d1db",
.sapphire = "#85c1dc",
.blue = "#8caaee",
.lavender = "#babbf1",
.text = "#c6d0f5",
.subtext1 = "#b5bfe2",
.subtext0 = "#a5adce",
.overlay2 = "#949cbb",
.overlay1 = "#838ba7",
.overlay0 = "#737994",
.surface2 = "#626880",
.surface1 = "#51576d",
.surface0 = "#414559",
.base = "#303446",
.mantle = "#292c3c",
.crust = "#232634",
},
.macchiato = .{
.rosewater = "#f4dbd6",
.flamingo = "#f0c6c6",
.pink = "#f5bde6",
.mauve = "#c6a0f6",
.red = "#ed8796",
.maroon = "#ee99a0",
.peach = "#f5a97f",
.yellow = "#eed49f",
.green = "#a6da95",
.teal = "#8bd5ca",
.sky = "#91d7e3",
.sapphire = "#7dc4e4",
.blue = "#8aadf4",
.lavender = "#b7bdf8",
.text = "#cad3f5",
.subtext1 = "#b8c0e0",
.subtext0 = "#a5adcb",
.overlay2 = "#939ab7",
.overlay1 = "#8087a2",
.overlay0 = "#6e738d",
.surface2 = "#5b6078",
.surface1 = "#494d64",
.surface0 = "#363a4f",
.base = "#24273a",
.mantle = "#1e2030",
.crust = "#181926",
},
.mocha = .{
.rosewater = "#f5e0dc",
.flamingo = "#f2cdcd",
.pink = "#f5c2e7",
.mauve = "#cba6f7",
.red = "#f38ba8",
.maroon = "#eba0ac",
.peach = "#fab387",
.yellow = "#f9e2af",
.green = "#a6e3a1",
.teal = "#94e2d5",
.sky = "#89dceb",
.sapphire = "#74c7ec",
.blue = "#89b4fa",
.lavender = "#b4befe",
.text = "#cdd6f4",
.subtext1 = "#bac2de",
.subtext0 = "#a6adc8",
.overlay2 = "#9399b2",
.overlay1 = "#7f849c",
.overlay0 = "#6c7086",
.surface2 = "#585b70",
.surface1 = "#45475a",
.surface0 = "#313244",
.base = "#1e1e2e",
.mantle = "#181825",
.crust = "#11111b",
},
};
pub const Palette = struct {
rosewater: []const u8,
flamingo: []const u8,
pink: []const u8,
mauve: []const u8,
red: []const u8,
maroon: []const u8,
peach: []const u8,
yellow: []const u8,
green: []const u8,
teal: []const u8,
sky: []const u8,
sapphire: []const u8,
blue: []const u8,
lavender: []const u8,
text: []const u8,
subtext1: []const u8,
subtext0: []const u8,
overlay2: []const u8,
overlay1: []const u8,
overlay0: []const u8,
surface2: []const u8,
surface1: []const u8,
surface0: []const u8,
base: []const u8,
mantle: []const u8,
crust: []const u8,
};
pub const CatppuccinColors = struct {
latte: Palette,
frappe: Palette,
macchiato: Palette,
mocha: Palette,
};Bonus: D3 Ordinal Scales
The amazing D3 project has nicely cureated "ordinal color scales" for presenting data. I use these to draw attention to unrelated bits of data, like columns in a spreadsheet, counts in charts, things like that. Here are the D3 ordinal scale color sets for popular languages:
// D3ordinal colors, see https://ansi.md.
var D3Ordinal = map[string][]string{
"category10": []string{
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
},
"accent": []string{
"#7fc97f",
"#beaed4",
"#fdc086",
"#ffff99",
"#386cb0",
"#f0027f",
"#bf5b17",
"#666666",
},
"dark2": []string{
"#1b9e77",
"#d95f02",
"#7570b3",
"#e7298a",
"#66a61e",
"#e6ab02",
"#a6761d",
"#666666",
},
"observable10": []string{
"#4269d0",
"#efb118",
"#ff725c",
"#6cc5b0",
"#3ca951",
"#ff8ab7",
"#a463f2",
"#97bbf5",
"#9c6b4e",
"#9498a0",
},
"paired": []string{
"#a6cee3",
"#1f78b4",
"#b2df8a",
"#33a02c",
"#fb9a99",
"#e31a1c",
"#fdbf6f",
"#ff7f00",
"#cab2d6",
"#6a3d9a",
"#ffff99",
"#b15928",
},
"pastel1": []string{
"#fbb4ae",
"#b3cde3",
"#ccebc5",
"#decbe4",
"#fed9a6",
"#ffffcc",
"#e5d8bd",
"#fddaec",
"#f2f2f2",
},
"pastel2": []string{
"#b3e2cd",
"#fdcdac",
"#cbd5e8",
"#f4cae4",
"#e6f5c9",
"#fff2ae",
"#f1e2cc",
"#cccccc",
},
"set1": []string{
"#e41a1c",
"#377eb8",
"#4daf4a",
"#984ea3",
"#ff7f00",
"#ffff33",
"#a65628",
"#f781bf",
"#999999",
},
"set2": []string{
"#66c2a5",
"#fc8d62",
"#8da0cb",
"#e78ac3",
"#a6d854",
"#ffd92f",
"#e5c494",
"#b3b3b3",
},
"set3": []string{
"#8dd3c7",
"#ffffb3",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#b3de69",
"#fccde5",
"#d9d9d9",
"#bc80bd",
"#ccebc5",
"#ffed6f",
},
"tableau10": []string{
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab",
},
}{
"category10": [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf"
],
"accent": [
"#7fc97f",
"#beaed4",
"#fdc086",
"#ffff99",
"#386cb0",
"#f0027f",
"#bf5b17",
"#666666"
],
"dark2": [
"#1b9e77",
"#d95f02",
"#7570b3",
"#e7298a",
"#66a61e",
"#e6ab02",
"#a6761d",
"#666666"
],
"observable10": [
"#4269d0",
"#efb118",
"#ff725c",
"#6cc5b0",
"#3ca951",
"#ff8ab7",
"#a463f2",
"#97bbf5",
"#9c6b4e",
"#9498a0"
],
"paired": [
"#a6cee3",
"#1f78b4",
"#b2df8a",
"#33a02c",
"#fb9a99",
"#e31a1c",
"#fdbf6f",
"#ff7f00",
"#cab2d6",
"#6a3d9a",
"#ffff99",
"#b15928"
],
"pastel1": [
"#fbb4ae",
"#b3cde3",
"#ccebc5",
"#decbe4",
"#fed9a6",
"#ffffcc",
"#e5d8bd",
"#fddaec",
"#f2f2f2"
],
"pastel2": [
"#b3e2cd",
"#fdcdac",
"#cbd5e8",
"#f4cae4",
"#e6f5c9",
"#fff2ae",
"#f1e2cc",
"#cccccc"
],
"set1": [
"#e41a1c",
"#377eb8",
"#4daf4a",
"#984ea3",
"#ff7f00",
"#ffff33",
"#a65628",
"#f781bf",
"#999999"
],
"set2": [
"#66c2a5",
"#fc8d62",
"#8da0cb",
"#e78ac3",
"#a6d854",
"#ffd92f",
"#e5c494",
"#b3b3b3"
],
"set3": [
"#8dd3c7",
"#ffffb3",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#b3de69",
"#fccde5",
"#d9d9d9",
"#bc80bd",
"#ccebc5",
"#ffed6f"
],
"tableau10": [
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab"
]
}# D3ordinal colors, see https://ansi.md.
D3_ORDINAL: dict[str, list[str]] = {
"category10": [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
],
"accent": [
"#7fc97f",
"#beaed4",
"#fdc086",
"#ffff99",
"#386cb0",
"#f0027f",
"#bf5b17",
"#666666",
],
"dark2": [
"#1b9e77",
"#d95f02",
"#7570b3",
"#e7298a",
"#66a61e",
"#e6ab02",
"#a6761d",
"#666666",
],
"observable10": [
"#4269d0",
"#efb118",
"#ff725c",
"#6cc5b0",
"#3ca951",
"#ff8ab7",
"#a463f2",
"#97bbf5",
"#9c6b4e",
"#9498a0",
],
"paired": [
"#a6cee3",
"#1f78b4",
"#b2df8a",
"#33a02c",
"#fb9a99",
"#e31a1c",
"#fdbf6f",
"#ff7f00",
"#cab2d6",
"#6a3d9a",
"#ffff99",
"#b15928",
],
"pastel1": [
"#fbb4ae",
"#b3cde3",
"#ccebc5",
"#decbe4",
"#fed9a6",
"#ffffcc",
"#e5d8bd",
"#fddaec",
"#f2f2f2",
],
"pastel2": [
"#b3e2cd",
"#fdcdac",
"#cbd5e8",
"#f4cae4",
"#e6f5c9",
"#fff2ae",
"#f1e2cc",
"#cccccc",
],
"set1": [
"#e41a1c",
"#377eb8",
"#4daf4a",
"#984ea3",
"#ff7f00",
"#ffff33",
"#a65628",
"#f781bf",
"#999999",
],
"set2": [
"#66c2a5",
"#fc8d62",
"#8da0cb",
"#e78ac3",
"#a6d854",
"#ffd92f",
"#e5c494",
"#b3b3b3",
],
"set3": [
"#8dd3c7",
"#ffffb3",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#b3de69",
"#fccde5",
"#d9d9d9",
"#bc80bd",
"#ccebc5",
"#ffed6f",
],
"tableau10": [
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab",
],
}# D3ordinal colors, see https://ansi.md.
D3_ORDINAL = {
category10: [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
],
accent: [
"#7fc97f",
"#beaed4",
"#fdc086",
"#ffff99",
"#386cb0",
"#f0027f",
"#bf5b17",
"#666666",
],
dark2: [
"#1b9e77",
"#d95f02",
"#7570b3",
"#e7298a",
"#66a61e",
"#e6ab02",
"#a6761d",
"#666666",
],
observable10: [
"#4269d0",
"#efb118",
"#ff725c",
"#6cc5b0",
"#3ca951",
"#ff8ab7",
"#a463f2",
"#97bbf5",
"#9c6b4e",
"#9498a0",
],
paired: [
"#a6cee3",
"#1f78b4",
"#b2df8a",
"#33a02c",
"#fb9a99",
"#e31a1c",
"#fdbf6f",
"#ff7f00",
"#cab2d6",
"#6a3d9a",
"#ffff99",
"#b15928",
],
pastel1: [
"#fbb4ae",
"#b3cde3",
"#ccebc5",
"#decbe4",
"#fed9a6",
"#ffffcc",
"#e5d8bd",
"#fddaec",
"#f2f2f2",
],
pastel2: [
"#b3e2cd",
"#fdcdac",
"#cbd5e8",
"#f4cae4",
"#e6f5c9",
"#fff2ae",
"#f1e2cc",
"#cccccc",
],
set1: [
"#e41a1c",
"#377eb8",
"#4daf4a",
"#984ea3",
"#ff7f00",
"#ffff33",
"#a65628",
"#f781bf",
"#999999",
],
set2: [
"#66c2a5",
"#fc8d62",
"#8da0cb",
"#e78ac3",
"#a6d854",
"#ffd92f",
"#e5c494",
"#b3b3b3",
],
set3: [
"#8dd3c7",
"#ffffb3",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#b3de69",
"#fccde5",
"#d9d9d9",
"#bc80bd",
"#ccebc5",
"#ffed6f",
],
tableau10: [
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab",
],
}.freeze// D3ordinal colors, see https://ansi.md.
pub const D3_ORDINAL: D3OrdinalScales = D3OrdinalScales {
category10: &[
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
],
accent: &[
"#7fc97f",
"#beaed4",
"#fdc086",
"#ffff99",
"#386cb0",
"#f0027f",
"#bf5b17",
"#666666",
],
dark2: &[
"#1b9e77",
"#d95f02",
"#7570b3",
"#e7298a",
"#66a61e",
"#e6ab02",
"#a6761d",
"#666666",
],
observable10: &[
"#4269d0",
"#efb118",
"#ff725c",
"#6cc5b0",
"#3ca951",
"#ff8ab7",
"#a463f2",
"#97bbf5",
"#9c6b4e",
"#9498a0",
],
paired: &[
"#a6cee3",
"#1f78b4",
"#b2df8a",
"#33a02c",
"#fb9a99",
"#e31a1c",
"#fdbf6f",
"#ff7f00",
"#cab2d6",
"#6a3d9a",
"#ffff99",
"#b15928",
],
pastel1: &[
"#fbb4ae",
"#b3cde3",
"#ccebc5",
"#decbe4",
"#fed9a6",
"#ffffcc",
"#e5d8bd",
"#fddaec",
"#f2f2f2",
],
pastel2: &[
"#b3e2cd",
"#fdcdac",
"#cbd5e8",
"#f4cae4",
"#e6f5c9",
"#fff2ae",
"#f1e2cc",
"#cccccc",
],
set1: &[
"#e41a1c",
"#377eb8",
"#4daf4a",
"#984ea3",
"#ff7f00",
"#ffff33",
"#a65628",
"#f781bf",
"#999999",
],
set2: &[
"#66c2a5",
"#fc8d62",
"#8da0cb",
"#e78ac3",
"#a6d854",
"#ffd92f",
"#e5c494",
"#b3b3b3",
],
set3: &[
"#8dd3c7",
"#ffffb3",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#b3de69",
"#fccde5",
"#d9d9d9",
"#bc80bd",
"#ccebc5",
"#ffed6f",
],
tableau10: &[
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab",
],
};
pub struct D3OrdinalScales {
pub category10: &'static [&'static str],
pub accent: &'static [&'static str],
pub dark2: &'static [&'static str],
pub observable10: &'static [&'static str],
pub paired: &'static [&'static str],
pub pastel1: &'static [&'static str],
pub pastel2: &'static [&'static str],
pub set1: &'static [&'static str],
pub set2: &'static [&'static str],
pub set3: &'static [&'static str],
pub tableau10: &'static [&'static str],
}// D3ordinal colors, see https://ansi.md.
export const d3Ordinal = {
category10: [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
],
accent: [
"#7fc97f",
"#beaed4",
"#fdc086",
"#ffff99",
"#386cb0",
"#f0027f",
"#bf5b17",
"#666666",
],
dark2: [
"#1b9e77",
"#d95f02",
"#7570b3",
"#e7298a",
"#66a61e",
"#e6ab02",
"#a6761d",
"#666666",
],
observable10: [
"#4269d0",
"#efb118",
"#ff725c",
"#6cc5b0",
"#3ca951",
"#ff8ab7",
"#a463f2",
"#97bbf5",
"#9c6b4e",
"#9498a0",
],
paired: [
"#a6cee3",
"#1f78b4",
"#b2df8a",
"#33a02c",
"#fb9a99",
"#e31a1c",
"#fdbf6f",
"#ff7f00",
"#cab2d6",
"#6a3d9a",
"#ffff99",
"#b15928",
],
pastel1: [
"#fbb4ae",
"#b3cde3",
"#ccebc5",
"#decbe4",
"#fed9a6",
"#ffffcc",
"#e5d8bd",
"#fddaec",
"#f2f2f2",
],
pastel2: [
"#b3e2cd",
"#fdcdac",
"#cbd5e8",
"#f4cae4",
"#e6f5c9",
"#fff2ae",
"#f1e2cc",
"#cccccc",
],
set1: [
"#e41a1c",
"#377eb8",
"#4daf4a",
"#984ea3",
"#ff7f00",
"#ffff33",
"#a65628",
"#f781bf",
"#999999",
],
set2: [
"#66c2a5",
"#fc8d62",
"#8da0cb",
"#e78ac3",
"#a6d854",
"#ffd92f",
"#e5c494",
"#b3b3b3",
],
set3: [
"#8dd3c7",
"#ffffb3",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#b3de69",
"#fccde5",
"#d9d9d9",
"#bc80bd",
"#ccebc5",
"#ffed6f",
],
tableau10: [
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab",
],
} as const;// D3ordinal colors, see https://ansi.md.
pub const d3Ordinal = D3OrdinalScales{
.category10 = &.{
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf",
},
.accent = &.{
"#7fc97f",
"#beaed4",
"#fdc086",
"#ffff99",
"#386cb0",
"#f0027f",
"#bf5b17",
"#666666",
},
.dark2 = &.{
"#1b9e77",
"#d95f02",
"#7570b3",
"#e7298a",
"#66a61e",
"#e6ab02",
"#a6761d",
"#666666",
},
.observable10 = &.{
"#4269d0",
"#efb118",
"#ff725c",
"#6cc5b0",
"#3ca951",
"#ff8ab7",
"#a463f2",
"#97bbf5",
"#9c6b4e",
"#9498a0",
},
.paired = &.{
"#a6cee3",
"#1f78b4",
"#b2df8a",
"#33a02c",
"#fb9a99",
"#e31a1c",
"#fdbf6f",
"#ff7f00",
"#cab2d6",
"#6a3d9a",
"#ffff99",
"#b15928",
},
.pastel1 = &.{
"#fbb4ae",
"#b3cde3",
"#ccebc5",
"#decbe4",
"#fed9a6",
"#ffffcc",
"#e5d8bd",
"#fddaec",
"#f2f2f2",
},
.pastel2 = &.{
"#b3e2cd",
"#fdcdac",
"#cbd5e8",
"#f4cae4",
"#e6f5c9",
"#fff2ae",
"#f1e2cc",
"#cccccc",
},
.set1 = &.{
"#e41a1c",
"#377eb8",
"#4daf4a",
"#984ea3",
"#ff7f00",
"#ffff33",
"#a65628",
"#f781bf",
"#999999",
},
.set2 = &.{
"#66c2a5",
"#fc8d62",
"#8da0cb",
"#e78ac3",
"#a6d854",
"#ffd92f",
"#e5c494",
"#b3b3b3",
},
.set3 = &.{
"#8dd3c7",
"#ffffb3",
"#bebada",
"#fb8072",
"#80b1d3",
"#fdb462",
"#b3de69",
"#fccde5",
"#d9d9d9",
"#bc80bd",
"#ccebc5",
"#ffed6f",
},
.tableau10 = &.{
"#4e79a7",
"#f28e2c",
"#e15759",
"#76b7b2",
"#59a14f",
"#edc949",
"#af7aa1",
"#ff9da7",
"#9c755f",
"#bab0ab",
},
};
pub const D3OrdinalScales = struct {
category10: []const []const u8,
accent: []const []const u8,
dark2: []const []const u8,
observable10: []const []const u8,
paired: []const []const u8,
pastel1: []const []const u8,
pastel2: []const []const u8,
set1: []const []const u8,
set2: []const []const u8,
set3: []const []const u8,
tableau10: []const []const u8,
};Details: ANSI 16 & ANSI 256 0-15
I find this topic confusing so I'm putting some details in here. All modern terminals let the user customize the "theme", which in effect means customizing ANSI colors 0-16. We are stuck with a primitive system for communicating color between apps and the host terminal. App says "color 4" and the terminal shows the color that the user picked for "blue".
For example, I use the catppuccin/ghostty Ghostty theme, which is setup like this:
# catppuccin-frappe.conf ghostty theme
palette = 0=#51576d
palette = 1=#e78284
palette = 2=#a6d189
palette = 3=#e5c890
palette = 4=#8caaee
palette = 5=#f4b8e4
palette = 6=#81c8be
palette = 7=#a5adce
palette = 8=#626880
palette = 9=#e78284
palette = 10=#a6d189
palette = 11=#e5c890
palette = 12=#8caaee
palette = 13=#f4b8e4
palette = 14=#81c8be
palette = 15=#b5bfe2
...Eight Normal Colors (Catppuccin Frappe)
| name | rgb | fg16 | bg16 | fg256 | bg256 |
|---|---|---|---|---|---|
| black | #51576d | \e[30m | \e[40m | \e[38;5;0m | \e[48;5;0m |
| red | #e78284 | \e[31m | \e[41m | \e[38;5;1m | \e[48;5;1m |
| green | #a6d189 | \e[32m | \e[42m | \e[38;5;2m | \e[48;5;2m |
| yellow | #e5c890 | \e[33m | \e[43m | \e[38;5;3m | \e[48;5;3m |
| blue | #8caaee | \e[34m | \e[44m | \e[38;5;4m | \e[48;5;4m |
| magenta | #f4b8e4 | \e[35m | \e[45m | \e[38;5;5m | \e[48;5;5m |
| cyan | #81c8be | \e[36m | \e[46m | \e[38;5;6m | \e[48;5;6m |
| white | #a5adce | \e[37m | \e[47m | \e[38;5;7m | \e[48;5;7m |
and of course the anachronistically named "bright" colors are part of the theme:
Eight "Bright" Colors (Catppuccin Frappe)
| name | rgb | fg16 | bg16 | fg256 | bg256 |
|---|---|---|---|---|---|
| "bright" black | #626880 | \e[90m | \e[100m | \e[38;5;8m | \e[48;5;8m |
| "bright" red | #e78284 | \e[91m | \e[101m | \e[38;5;9m | \e[48;5;9m |
| "bright" green | #a6d189 | \e[92m | \e[102m | \e[38;5;10m | \e[48;5;10m |
| "bright" yellow | #e5c890 | \e[93m | \e[103m | \e[38;5;11m | \e[48;5;11m |
| "bright" blue | #8caaee | \e[94m | \e[104m | \e[38;5;12m | \e[48;5;12m |
| "bright" magenta | #f4b8e4 | \e[95m | \e[105m | \e[38;5;13m | \e[48;5;13m |
| "bright" cyan | #81c8be | \e[96m | \e[106m | \e[38;5;14m | \e[48;5;14m |
| "bright" white | #b5bfe2 | \e[97m | \e[107m | \e[38;5;15m | \e[48;5;15m |
And Once Again
To refer back to the example at the top of this page,
# ansi16 white on ansi16 green (borked)
printf '\e[37;42m 1. hello, world \e[0m\n'
# ansi256 brightwhite on ansi256 green (borked)
printf '\e[38;5;15;48;5;2m 2. hello, world \e[0m\n'
# ansi 256 system white on ansi256 system green (AWESOMENESS)
printf '\e[38;5;255;48;5;40m 3. hello, world \e[0m\n'
When we try to create UI with the user's colors, things go astray. That's why I avoid ANSI 16 or ANSI 256 0-15. Just because the internet calls that color "white" doesn't mean it's going to look anything like white. Don't be fooled!