File indexing completed on 2026-04-18 07:40:33
0001 <div class="palette-container">
0002 <h1>Color Palette</h1>
0003 <p class="subtitle">Colors from <code>cool2-geometry-ruleset.ts</code></p>
0004
0005 <section>
0006 <h2>Cool Colors (Light/Pastel)</h2>
0007 <div class="palette">
0008 @for (color of coolColors; track color.name) {
0009 <div class="color-card">
0010 <div class="color-swatch" [style.background-color]="color.hexString"></div>
0011 <div class="color-info">
0012 <div class="color-name">{{ color.name }}</div>
0013 <div class="color-hex">{{ color.hexString }}</div>
0014 <div class="color-hex">{{ formatHexValue(color.value) }}</div>
0015 </div>
0016 </div>
0017 }
0018 </div>
0019 </section>
0020
0021 <section>
0022 <h2>Medium Colors (Moderate Saturation)</h2>
0023 <div class="palette">
0024 @for (color of mediumColors; track color.name) {
0025 <div class="color-card">
0026 <div class="color-swatch" [style.background-color]="color.hexString"></div>
0027 <div class="color-info">
0028 <div class="color-name">{{ color.name }}</div>
0029 <div class="color-hex">{{ color.hexString }}</div>
0030 <div class="color-hex">{{ formatHexValue(color.value) }}</div>
0031 </div>
0032 </div>
0033 }
0034 </div>
0035 </section>
0036
0037 <section>
0038 <h2>Warm Colors (Saturated/Heavy)</h2>
0039 <div class="palette">
0040 @for (color of warmColors; track color.name) {
0041 <div class="color-card">
0042 <div class="color-swatch" [style.background-color]="color.hexString"></div>
0043 <div class="color-info">
0044 <div class="color-name">{{ color.name }}</div>
0045 <div class="color-hex">{{ color.hexString }}</div>
0046 <div class="color-hex">{{ formatHexValue(color.value) }}</div>
0047 </div>
0048 </div>
0049 }
0050 </div>
0051 </section>
0052
0053 <section>
0054 <h2>Metallic Colors</h2>
0055 <div class="palette">
0056 @for (color of metallicColors; track color.name) {
0057 <div class="color-card">
0058 <div class="color-swatch" [style.background-color]="color.hexString"></div>
0059 <div class="color-info">
0060 <div class="color-name">{{ color.name }}</div>
0061 <div class="color-hex">{{ color.hexString }}</div>
0062 <div class="color-hex">{{ formatHexValue(color.value) }}</div>
0063 </div>
0064 </div>
0065 }
0066 </div>
0067 </section>
0068
0069 <section>
0070 <h2>All Colors (Sorted by Hue)</h2>
0071 <div class="palette">
0072 @for (color of allColors; track color.name) {
0073 <div class="color-card">
0074 <div class="color-swatch" [style.background-color]="color.hexString"></div>
0075 <div class="color-info">
0076 <div class="color-name">{{ color.name }}</div>
0077 <div class="color-hex">{{ color.hexString }}</div>
0078 <div class="color-hex">{{ formatHexValue(color.value) }}</div>
0079 </div>
0080 </div>
0081 }
0082 </div>
0083 </section>
0084 </div>
