hozen: add new color system
This commit is contained in:
parent
723bf4d367
commit
11bd9a3671
6 changed files with 332 additions and 373 deletions
|
|
@ -1,10 +1,81 @@
|
|||
{ook, ...}: let
|
||||
inherit (ook.lib.color.utils) mkLightColorScheme mkDarkColorScheme;
|
||||
|
||||
darkScheme = mkDarkColorScheme {
|
||||
neutrals = {
|
||||
"50" = "dfd2b3";
|
||||
"100" = "d9c7a5";
|
||||
"150" = "d4be98";
|
||||
"200" = "c6b395";
|
||||
"250" = "b4a288";
|
||||
"300" = "a49384";
|
||||
"350" = "99897a";
|
||||
"400" = "8b7c6f";
|
||||
"450" = "7d6f64";
|
||||
"500" = "716860";
|
||||
"550" = "645f59";
|
||||
"600" = "585350";
|
||||
"650" = "4d4947";
|
||||
"700" = "3f3b3b";
|
||||
"750" = "343232";
|
||||
"800" = "282828";
|
||||
"850" = "212121";
|
||||
"900" = "1a1a1a";
|
||||
};
|
||||
primary = "ea6962";
|
||||
red = "ea6962";
|
||||
orange = "e78a4e";
|
||||
yellow = "d8a657";
|
||||
olive = "b9b25f";
|
||||
green = "a9b665";
|
||||
teal = "89b482";
|
||||
blue = "7daea3";
|
||||
violet = "d892c1";
|
||||
purple = "d3869b";
|
||||
pink = "cf91be";
|
||||
brown = "a87757";
|
||||
};
|
||||
|
||||
lightScheme = mkLightColorScheme {
|
||||
neutrals = {
|
||||
"50" = "f7efda";
|
||||
"100" = "f4eac8";
|
||||
"150" = "f2e5bc";
|
||||
"200" = "e7d9b1";
|
||||
"250" = "ddcca6";
|
||||
"300" = "d3c19c";
|
||||
"350" = "c5b496";
|
||||
"400" = "b7a78f";
|
||||
"450" = "a89984";
|
||||
"500" = "a08e79";
|
||||
"550" = "9a826a";
|
||||
"600" = "91785f";
|
||||
"650" = "8a7056";
|
||||
"700" = "745a44";
|
||||
"750" = "6d4e3c";
|
||||
"800" = "654735";
|
||||
"850" = "5e4131";
|
||||
"900" = "51372a";
|
||||
};
|
||||
primary = "45707a";
|
||||
red = "be4141"; # contrast 4.55
|
||||
orange = "ad540b"; # contrast 4.52
|
||||
yellow = "966208"; # contrast 4.51
|
||||
olive = "707029"; # contrast 4.51
|
||||
green = "67732b"; # contrast 4.51
|
||||
teal = "497459"; # contrast 4.67
|
||||
blue = "45707a"; # contrast 4.75
|
||||
violet = "7d6198"; # contrast 4.54
|
||||
purple = "8f5b7c"; # contrast 4.63
|
||||
pink = "925d66"; # contrast 4.6
|
||||
brown = "654735"; # contrast 7.31
|
||||
};
|
||||
style = {
|
||||
color = import ./dark.nix {inherit ook;};
|
||||
light.color = import ./light.nix {inherit ook;};
|
||||
dark.color = import ./dark.nix {inherit ook;};
|
||||
color = darkScheme;
|
||||
light.color = lightScheme;
|
||||
dark.color = darkScheme;
|
||||
};
|
||||
in {
|
||||
_module.args.sytle = style;
|
||||
flake.style = style;
|
||||
_module.args.hozen = style;
|
||||
flake.hozen = style;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,310 +0,0 @@
|
|||
# Color Scheme Documentation
|
||||
|
||||
Generated on: 1730946863
|
||||
|
||||
## Table of Contents
|
||||
|
||||
- [Neutral Shades](#neutral-shades)
|
||||
- [Base Colors](#base-colors)
|
||||
- [Syntax Highlighting](#syntax-highlighting)
|
||||
- [Semantic Colors](#semantic-colors)
|
||||
- [Color Scales](#color-scales)
|
||||
|
||||
## Color Preview
|
||||
|
||||
### Neutral Shades
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `100` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
|
||||
| `150` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
|
||||
| `200` | <span style='display:inline-block; width:50px; height:20px; background:#c6b395; border:1px solid #282828;'></span> | `#c6b395` |
|
||||
| `250` | <span style='display:inline-block; width:50px; height:20px; background:#b4a288; border:1px solid #282828;'></span> | `#b4a288` |
|
||||
| `300` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
|
||||
| `350` | <span style='display:inline-block; width:50px; height:20px; background:#99897a; border:1px solid #282828;'></span> | `#99897a` |
|
||||
| `400` | <span style='display:inline-block; width:50px; height:20px; background:#8b7c6f; border:1px solid #282828;'></span> | `#8b7c6f` |
|
||||
| `450` | <span style='display:inline-block; width:50px; height:20px; background:#7d6f64; border:1px solid #282828;'></span> | `#7d6f64` |
|
||||
| `50` | <span style='display:inline-block; width:50px; height:20px; background:#dfd2b3; border:1px solid #282828;'></span> | `#dfd2b3` |
|
||||
| `500` | <span style='display:inline-block; width:50px; height:20px; background:#716860; border:1px solid #282828;'></span> | `#716860` |
|
||||
| `550` | <span style='display:inline-block; width:50px; height:20px; background:#645f59; border:1px solid #282828;'></span> | `#645f59` |
|
||||
| `600` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
|
||||
| `650` | <span style='display:inline-block; width:50px; height:20px; background:#4d4947; border:1px solid #282828;'></span> | `#4d4947` |
|
||||
| `700` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
|
||||
| `750` | <span style='display:inline-block; width:50px; height:20px; background:#343232; border:1px solid #282828;'></span> | `#343232` |
|
||||
| `800` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
|
||||
| `850` | <span style='display:inline-block; width:50px; height:20px; background:#212121; border:1px solid #282828;'></span> | `#212121` |
|
||||
| `900` | <span style='display:inline-block; width:50px; height:20px; background:#1a1a1a; border:1px solid #282828;'></span> | `#1a1a1a` |
|
||||
|
||||
### Base Colors
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base00` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
|
||||
| `base01` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
|
||||
| `base02` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
|
||||
| `base03` | <span style='display:inline-block; width:50px; height:20px; background:#7d6f64; border:1px solid #282828;'></span> | `#7d6f64` |
|
||||
| `base04` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
|
||||
| `base05` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
|
||||
| `base06` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
|
||||
| `base07` | <span style='display:inline-block; width:50px; height:20px; background:#dfd2b3; border:1px solid #282828;'></span> | `#dfd2b3` |
|
||||
| `base08` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
|
||||
| `base09` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
|
||||
| `base0A` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
|
||||
| `base0B` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
|
||||
| `base0C` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
|
||||
| `base0D` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
|
||||
| `base0E` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `base0F` | <span style='display:inline-block; width:50px; height:20px; background:#a87757; border:1px solid #282828;'></span> | `#a87757` |
|
||||
| `base10` | <span style='display:inline-block; width:50px; height:20px; background:#212121; border:1px solid #282828;'></span> | `#212121` |
|
||||
| `base11` | <span style='display:inline-block; width:50px; height:20px; background:#1a1a1a; border:1px solid #282828;'></span> | `#1a1a1a` |
|
||||
| `base12` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
|
||||
| `base13` | <span style='display:inline-block; width:50px; height:20px; background:#d3b17b; border:1px solid #282828;'></span> | `#d3b17b` |
|
||||
| `base14` | <span style='display:inline-block; width:50px; height:20px; background:#adb486; border:1px solid #282828;'></span> | `#adb486` |
|
||||
| `base15` | <span style='display:inline-block; width:50px; height:20px; background:#a2b59f; border:1px solid #282828;'></span> | `#a2b59f` |
|
||||
| `base16` | <span style='display:inline-block; width:50px; height:20px; background:#9bafaa; border:1px solid #282828;'></span> | `#9bafaa` |
|
||||
| `base17` | <span style='display:inline-block; width:50px; height:20px; background:#d3a4b1; border:1px solid #282828;'></span> | `#d3a4b1` |
|
||||
|
||||
### Syntax Highlighting
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `boolean` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `comment` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
|
||||
| `constant` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
|
||||
| `define` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `exception` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
|
||||
| `float` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `function` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
|
||||
| `identifier` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
|
||||
| `include` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `label` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
|
||||
| `macro` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
|
||||
| `number` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `operator` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
|
||||
| `preCondit` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `preproc` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `special` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
|
||||
| `specialChar` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
|
||||
| `statement` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
|
||||
| `storageClass` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
|
||||
| `string` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
|
||||
| `structure` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
|
||||
| `tag` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
|
||||
| `todo` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `type` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
|
||||
|
||||
### Semantic Colors
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `body` | <span style='display:inline-block; width:50px; height:20px; background:#3f3b3b; border:1px solid #282828;'></span> | `#3f3b3b` |
|
||||
| `border` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
|
||||
| `border-active` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
|
||||
| `border-inactive` | <span style='display:inline-block; width:50px; height:20px; background:#585350; border:1px solid #282828;'></span> | `#585350` |
|
||||
| `footer` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
|
||||
| `header` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
|
||||
| `menu` | <span style='display:inline-block; width:50px; height:20px; background:#282828; border:1px solid #555;'></span> | `#282828` |
|
||||
| `subtext` | <span style='display:inline-block; width:50px; height:20px; background:#a49384; border:1px solid #282828;'></span> | `#a49384` |
|
||||
| `text` | <span style='display:inline-block; width:50px; height:20px; background:#d4be98; border:1px solid #282828;'></span> | `#d4be98` |
|
||||
| `text-bright` | <span style='display:inline-block; width:50px; height:20px; background:#d9c7a5; border:1px solid #282828;'></span> | `#d9c7a5` |
|
||||
|
||||
## Color Scales
|
||||
|
||||
### Color Scale: red
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#e2615b; border:1px solid #282828;'></span> | `#e2615b` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d95a54; border:1px solid #282828;'></span> | `#d95a54` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#d1544e; border:1px solid #282828;'></span> | `#d1544e` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#c64f49; border:1px solid #282828;'></span> | `#c64f49` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e77a74; border:1px solid #282828;'></span> | `#e77a74` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#e39b96; border:1px solid #282828;'></span> | `#e39b96` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#e3a9a6; border:1px solid #282828;'></span> | `#e3a9a6` |
|
||||
|
||||
### Color Scale: orange
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#e78a4e; border:1px solid #282828;'></span> | `#e78a4e` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#df8247; border:1px solid #282828;'></span> | `#df8247` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d57b41; border:1px solid #282828;'></span> | `#d57b41` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#cc743c; border:1px solid #282828;'></span> | `#cc743c` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#bc6e3c; border:1px solid #282828;'></span> | `#bc6e3c` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e39461; border:1px solid #282828;'></span> | `#e39461` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e19e73; border:1px solid #282828;'></span> | `#e19e73` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#dea884; border:1px solid #282828;'></span> | `#dea884` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#ddb195; border:1px solid #282828;'></span> | `#ddb195` |
|
||||
|
||||
### Color Scale: yellow
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d8a657; border:1px solid #282828;'></span> | `#d8a657` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ce9e52; border:1px solid #282828;'></span> | `#ce9e52` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#c4964c; border:1px solid #282828;'></span> | `#c4964c` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#b88d49; border:1px solid #282828;'></span> | `#b88d49` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a7834b; border:1px solid #282828;'></span> | `#a7834b` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d5ac69; border:1px solid #282828;'></span> | `#d5ac69` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d3b17b; border:1px solid #282828;'></span> | `#d3b17b` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d3b78a; border:1px solid #282828;'></span> | `#d3b78a` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d3bc9a; border:1px solid #282828;'></span> | `#d3bc9a` |
|
||||
|
||||
### Color Scale: olive
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#b9b25f; border:1px solid #282828;'></span> | `#b9b25f` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ada75b; border:1px solid #282828;'></span> | `#ada75b` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#9e995b; border:1px solid #282828;'></span> | `#9e995b` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#8e8a5c; border:1px solid #282828;'></span> | `#8e8a5c` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#7e7b5d; border:1px solid #282828;'></span> | `#7e7b5d` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#b8b270; border:1px solid #282828;'></span> | `#b8b270` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#b6b280; border:1px solid #282828;'></span> | `#b6b280` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#b6b390; border:1px solid #282828;'></span> | `#b6b390` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b8b69e; border:1px solid #282828;'></span> | `#b8b69e` |
|
||||
|
||||
### Color Scale: green
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#a9b665; border:1px solid #282828;'></span> | `#a9b665` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#9eaa62; border:1px solid #282828;'></span> | `#9eaa62` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#939c60; border:1px solid #282828;'></span> | `#939c60` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#858c61; border:1px solid #282828;'></span> | `#858c61` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#787b62; border:1px solid #282828;'></span> | `#787b62` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#abb575; border:1px solid #282828;'></span> | `#abb575` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#adb486; border:1px solid #282828;'></span> | `#adb486` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#afb594; border:1px solid #282828;'></span> | `#afb594` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b3b6a3; border:1px solid #282828;'></span> | `#b3b6a3` |
|
||||
|
||||
### Color Scale: teal
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#89b482; border:1px solid #282828;'></span> | `#89b482` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#85a87e; border:1px solid #282828;'></span> | `#85a87e` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#819b7d; border:1px solid #282828;'></span> | `#819b7d` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#7e8d7b; border:1px solid #282828;'></span> | `#7e8d7b` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#7b7e7b; border:1px solid #282828;'></span> | `#7b7e7b` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#96b492; border:1px solid #282828;'></span> | `#96b492` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#a2b59f; border:1px solid #282828;'></span> | `#a2b59f` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#aeb7ad; border:1px solid #282828;'></span> | `#aeb7ad` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b9bab9; border:1px solid #282828;'></span> | `#b9bab9` |
|
||||
|
||||
### Color Scale: blue
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#7daea3; border:1px solid #282828;'></span> | `#7daea3` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#7ba198; border:1px solid #282828;'></span> | `#7ba198` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#79938e; border:1px solid #282828;'></span> | `#79938e` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#788582; border:1px solid #282828;'></span> | `#788582` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#777777; border:1px solid #282828;'></span> | `#777777` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#8caea7; border:1px solid #282828;'></span> | `#8caea7` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#9bafaa; border:1px solid #282828;'></span> | `#9bafaa` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#a8b1af; border:1px solid #282828;'></span> | `#a8b1af` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#b4b4b4; border:1px solid #282828;'></span> | `#b4b4b4` |
|
||||
|
||||
### Color Scale: violet
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d892c1; border:1px solid #282828;'></span> | `#d892c1` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#cf8cb9; border:1px solid #282828;'></span> | `#cf8cb9` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#c586b0; border:1px solid #282828;'></span> | `#c586b0` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#bb81a8; border:1px solid #282828;'></span> | `#bb81a8` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#af7e9f; border:1px solid #282828;'></span> | `#af7e9f` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d8a1c6; border:1px solid #282828;'></span> | `#d8a1c6` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d9b0cc; border:1px solid #282828;'></span> | `#d9b0cc` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#dbbdd1; border:1px solid #282828;'></span> | `#dbbdd1` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#dec9d7; border:1px solid #282828;'></span> | `#dec9d7` |
|
||||
|
||||
### Color Scale: purple
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#d3869b; border:1px solid #282828;'></span> | `#d3869b` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#ca8094; border:1px solid #282828;'></span> | `#ca8094` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#bf7c8e; border:1px solid #282828;'></span> | `#bf7c8e` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#b47788; border:1px solid #282828;'></span> | `#b47788` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a87482; border:1px solid #282828;'></span> | `#a87482` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d395a6; border:1px solid #282828;'></span> | `#d395a6` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d3a4b1; border:1px solid #282828;'></span> | `#d3a4b1` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d4b3bc; border:1px solid #282828;'></span> | `#d4b3bc` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d7bfc6; border:1px solid #282828;'></span> | `#d7bfc6` |
|
||||
|
||||
### Color Scale: pink
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#cf91be; border:1px solid #282828;'></span> | `#cf91be` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#c58bb6; border:1px solid #282828;'></span> | `#c58bb6` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#bb87ac; border:1px solid #282828;'></span> | `#bb87ac` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#af83a3; border:1px solid #282828;'></span> | `#af83a3` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#a28099; border:1px solid #282828;'></span> | `#a28099` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#d0a0c2; border:1px solid #282828;'></span> | `#d0a0c2` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#d0aec7; border:1px solid #282828;'></span> | `#d0aec7` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#d3bbcc; border:1px solid #282828;'></span> | `#d3bbcc` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#d6c8d2; border:1px solid #282828;'></span> | `#d6c8d2` |
|
||||
|
||||
### Color Scale: brown
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#a87757; border:1px solid #282828;'></span> | `#a87757` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#977259; border:1px solid #282828;'></span> | `#977259` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#876c5a; border:1px solid #282828;'></span> | `#876c5a` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#77665a; border:1px solid #282828;'></span> | `#77665a` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#695f59; border:1px solid #282828;'></span> | `#695f59` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#a68168; border:1px solid #282828;'></span> | `#a68168` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#a58a79; border:1px solid #282828;'></span> | `#a58a79` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#a59388; border:1px solid #282828;'></span> | `#a59388` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#a69d96; border:1px solid #282828;'></span> | `#a69d96` |
|
||||
|
||||
### Color Scale: primary
|
||||
|
||||
| Name | Preview | Hex |
|
||||
| ---- | ------- | --- |
|
||||
|
||||
| `base` | <span style='display:inline-block; width:50px; height:20px; background:#ea6962; border:1px solid #282828;'></span> | `#ea6962` |
|
||||
| `down1` | <span style='display:inline-block; width:50px; height:20px; background:#e2615b; border:1px solid #282828;'></span> | `#e2615b` |
|
||||
| `down2` | <span style='display:inline-block; width:50px; height:20px; background:#d95a54; border:1px solid #282828;'></span> | `#d95a54` |
|
||||
| `down3` | <span style='display:inline-block; width:50px; height:20px; background:#d1544e; border:1px solid #282828;'></span> | `#d1544e` |
|
||||
| `down4` | <span style='display:inline-block; width:50px; height:20px; background:#c64f49; border:1px solid #282828;'></span> | `#c64f49` |
|
||||
| `up1` | <span style='display:inline-block; width:50px; height:20px; background:#e77a74; border:1px solid #282828;'></span> | `#e77a74` |
|
||||
| `up2` | <span style='display:inline-block; width:50px; height:20px; background:#e58b86; border:1px solid #282828;'></span> | `#e58b86` |
|
||||
| `up3` | <span style='display:inline-block; width:50px; height:20px; background:#e39b96; border:1px solid #282828;'></span> | `#e39b96` |
|
||||
| `up4` | <span style='display:inline-block; width:50px; height:20px; background:#e3a9a6; border:1px solid #282828;'></span> | `#e3a9a6` |
|
||||
|
||||
## Usage
|
||||
|
||||
This color scheme is generated using Nix. To use these colors, you can:
|
||||
|
||||
1. Import the color scheme directly in your Nix configuration
|
||||
2. Generate theme files for your preferred applications
|
||||
3. Use the hex values in your CSS/HTML
|
||||
|
||||
## Notes
|
||||
|
||||
- All colors are in hexadecimal format
|
||||
- Preview squares show approximate colors (may vary by display)
|
||||
- Neutral shades provide a range from lightest (50) to darkest (900)
|
||||
- Color scales provide variations for UI elements
|
||||
Loading…
Add table
Add a link
Reference in a new issue