pixelsrc 0.2.0

Pixelsrc - GenAI-native pixel art format and compiler
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133

<!-- Generated by scripts/generate-demos.sh -->
<!-- Do not edit manually - regenerate with: ./scripts/generate-demos.sh -->

# CSS Color Demos

## Tests hex color formats: #rgb, #rrggbb, #rrggbbaa

<div class="demo-source">

```jsonl
{"type": "palette", "name": "hex_short", "colors": {"{r}": "#F00", "{g}": "#0F0", "{b}": "#00F", "{_}": "#0000"}}
{"type": "sprite", "name": "rgb_short", "palette": "hex_short", "grid": ["{r}{g}{b}"]}
{"type": "palette", "name": "hex_full", "colors": {"{red}": "#FF0000", "{green}": "#00FF00", "{blue}": "#0000FF", "{_}": "#00000000"}}
{"type": "sprite", "name": "rgb_full", "palette": "hex_full", "grid": ["{red}{green}{blue}"]}
{"type": "palette", "name": "hex_alpha", "colors": {"{solid}": "#FF0000FF", "{half}": "#FF000080", "{quarter}": "#FF000040", "{_}": "#00000000"}}
{"type": "sprite", "name": "alpha_gradient", "palette": "hex_alpha", "grid": ["{solid}{half}{quarter}{_}"]}
```

</div>

<div class="demo-container" data-demo="hex">
</div>

## Tests rgb() and rgba() color functions

<div class="demo-source">

```jsonl
{"type": "palette", "name": "rgb_basic", "colors": {"{red}": "rgb(255, 0, 0)", "{green}": "rgb(0, 255, 0)", "{blue}": "rgb(0, 0, 255)", "{_}": "rgb(0, 0, 0, 0)"}}
{"type": "sprite", "name": "rgb_demo", "palette": "rgb_basic", "grid": ["{red}{green}{blue}"]}
{"type": "palette", "name": "rgb_percent", "colors": {"{red}": "rgb(100%, 0%, 0%)", "{green}": "rgb(0%, 100%, 0%)", "{blue}": "rgb(0%, 0%, 100%)"}}
{"type": "palette", "name": "rgba_alpha", "colors": {"{solid}": "rgba(255, 0, 0, 1)", "{half}": "rgba(255, 0, 0, 0.5)", "{quarter}": "rgba(255, 0, 0, 0.25)", "{_}": "rgba(0, 0, 0, 0)"}}
{"type": "sprite", "name": "rgba_gradient", "palette": "rgba_alpha", "grid": ["{solid}{half}{quarter}{_}"]}
{"type": "palette", "name": "rgb_modern", "colors": {"{red}": "rgb(255 0 0)", "{green}": "rgb(0 255 0)", "{blue}": "rgb(0 0 255 / 50%)"}}
```

</div>

<div class="demo-container" data-demo="rgb">
</div>

## Tests hsl() and hsla() color functions

<div class="demo-source">

```jsonl
{"type": "palette", "name": "hsl_basic", "colors": {"{red}": "hsl(0, 100%, 50%)", "{green}": "hsl(120, 100%, 50%)", "{blue}": "hsl(240, 100%, 50%)", "{_}": "hsla(0, 0%, 0%, 0)"}}
{"type": "sprite", "name": "hsl_demo", "palette": "hsl_basic", "grid": ["{red}{green}{blue}"]}
{"type": "palette", "name": "hsl_saturation", "colors": {"{vivid}": "hsl(0, 100%, 50%)", "{muted}": "hsl(0, 50%, 50%)", "{gray}": "hsl(0, 0%, 50%)"}}
{"type": "sprite", "name": "saturation_demo", "palette": "hsl_saturation", "grid": ["{vivid}{muted}{gray}"]}
{"type": "palette", "name": "hsl_lightness", "colors": {"{light}": "hsl(0, 100%, 75%)", "{medium}": "hsl(0, 100%, 50%)", "{dark}": "hsl(0, 100%, 25%)"}}
{"type": "sprite", "name": "lightness_demo", "palette": "hsl_lightness", "grid": ["{light}{medium}{dark}"]}
{"type": "palette", "name": "hsla_alpha", "colors": {"{solid}": "hsla(0, 100%, 50%, 1)", "{half}": "hsla(0, 100%, 50%, 0.5)", "{quarter}": "hsla(0, 100%, 50%, 0.25)"}}
```

</div>

<div class="demo-container" data-demo="hsl">
</div>

## Tests oklch() color function (perceptually uniform)

<div class="demo-source">

```jsonl
{"type": "palette", "name": "oklch_basic", "colors": {"{red}": "oklch(0.628 0.258 29.23)", "{green}": "oklch(0.866 0.295 142.5)", "{blue}": "oklch(0.452 0.313 264.05)", "{_}": "oklch(0 0 0 / 0)"}}
{"type": "sprite", "name": "oklch_demo", "palette": "oklch_basic", "grid": ["{red}{green}{blue}"]}
{"type": "palette", "name": "oklch_lightness", "colors": {"{light}": "oklch(0.9 0.15 29)", "{medium}": "oklch(0.6 0.15 29)", "{dark}": "oklch(0.3 0.15 29)"}}
{"type": "sprite", "name": "oklch_lightness_demo", "palette": "oklch_lightness", "grid": ["{light}{medium}{dark}"]}
{"type": "palette", "name": "oklch_chroma", "colors": {"{vivid}": "oklch(0.6 0.3 29)", "{muted}": "oklch(0.6 0.15 29)", "{gray}": "oklch(0.6 0 29)"}}
{"type": "sprite", "name": "oklch_chroma_demo", "palette": "oklch_chroma", "grid": ["{vivid}{muted}{gray}"]}
```

</div>

<div class="demo-container" data-demo="oklch">
</div>

## Tests hwb() color function (hue-whiteness-blackness)

<div class="demo-source">

```jsonl
{"type": "palette", "name": "hwb_basic", "colors": {"{red}": "hwb(0 0% 0%)", "{green}": "hwb(120 0% 0%)", "{blue}": "hwb(240 0% 0%)", "{_}": "hwb(0 0% 0% / 0)"}}
{"type": "sprite", "name": "hwb_demo", "palette": "hwb_basic", "grid": ["{red}{green}{blue}"]}
{"type": "palette", "name": "hwb_whiteness", "colors": {"{pure}": "hwb(0 0% 0%)", "{tinted}": "hwb(0 25% 0%)", "{pastel}": "hwb(0 50% 0%)"}}
{"type": "sprite", "name": "hwb_whiteness_demo", "palette": "hwb_whiteness", "grid": ["{pure}{tinted}{pastel}"]}
{"type": "palette", "name": "hwb_blackness", "colors": {"{bright}": "hwb(0 0% 0%)", "{shaded}": "hwb(0 0% 25%)", "{dark}": "hwb(0 0% 50%)"}}
{"type": "sprite", "name": "hwb_blackness_demo", "palette": "hwb_blackness", "grid": ["{bright}{shaded}{dark}"]}
```

</div>

<div class="demo-container" data-demo="hwb">
</div>

## Tests CSS named colors (red, blue, coral, etc.)

<div class="demo-source">

```jsonl
{"type": "palette", "name": "named_basic", "colors": {"{r}": "red", "{g}": "green", "{b}": "blue", "{_}": "transparent"}}
{"type": "sprite", "name": "named_demo", "palette": "named_basic", "grid": ["{r}{g}{b}"]}
{"type": "palette", "name": "named_warm", "colors": {"{coral}": "coral", "{salmon}": "salmon", "{tomato}": "tomato", "{orange}": "orange", "{gold}": "gold"}}
{"type": "sprite", "name": "warm_colors", "palette": "named_warm", "grid": ["{coral}{salmon}{tomato}{orange}{gold}"]}
{"type": "palette", "name": "named_cool", "colors": {"{navy}": "navy", "{teal}": "teal", "{cyan}": "cyan", "{aqua}": "aqua", "{turquoise}": "turquoise"}}
{"type": "sprite", "name": "cool_colors", "palette": "named_cool", "grid": ["{navy}{teal}{cyan}{aqua}{turquoise}"]}
{"type": "palette", "name": "named_neutral", "colors": {"{white}": "white", "{silver}": "silver", "{gray}": "gray", "{dimgray}": "dimgray", "{black}": "black"}}
{"type": "sprite", "name": "grayscale", "palette": "named_neutral", "grid": ["{white}{silver}{gray}{dimgray}{black}"]}
```

</div>

<div class="demo-container" data-demo="named">
</div>

## Tests color-mix() function for blending colors

<div class="demo-source">

```jsonl
{"type": "palette", "name": "color_mix_basic", "colors": {"{purple}": "color-mix(in srgb, red 50%, blue)", "{gray}": "color-mix(in srgb, white, black)", "{teal}": "color-mix(in oklch, blue 60%, green)"}}
{"type": "palette", "name": "shadows_oklch", "colors": {"{base}": "#FF6B6B", "{shadow_light}": "color-mix(in oklch, #FF6B6B 70%, black)", "{shadow_medium}": "color-mix(in oklch, #FF6B6B 50%, black)", "{shadow_deep}": "color-mix(in oklch, #FF6B6B 30%, black)"}}
{"type": "palette", "name": "highlights_srgb", "colors": {"{base}": "#3366CC", "{highlight_subtle}": "color-mix(in srgb, #3366CC 70%, white)", "{highlight_medium}": "color-mix(in srgb, #3366CC 50%, white)", "{highlight_bright}": "color-mix(in srgb, #3366CC 30%, white)"}}
{"type": "palette", "name": "skin_tones", "colors": {"{_}": "transparent", "{skin}": "#FFCC99", "{skin_hi}": "color-mix(in srgb, #FFCC99 60%, white)", "{skin_sh}": "color-mix(in oklch, #FFCC99 70%, black)"}}
{"type": "sprite", "name": "shaded_square", "size": [3, 3], "palette": "skin_tones", "grid": ["{skin_hi}{skin_hi}{skin}", "{skin_hi}{skin}{skin_sh}", "{skin}{skin_sh}{skin_sh}"]}
```

</div>

<div class="demo-container" data-demo="color_mix">
</div>