cataract 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (90) hide show
  1. checksums.yaml +7 -0
  2. data/.clang-tidy +30 -0
  3. data/.github/workflows/ci-macos.yml +12 -0
  4. data/.github/workflows/ci.yml +77 -0
  5. data/.github/workflows/test.yml +76 -0
  6. data/.gitignore +45 -0
  7. data/.overcommit.yml +38 -0
  8. data/.rubocop.yml +83 -0
  9. data/BENCHMARKS.md +201 -0
  10. data/CHANGELOG.md +1 -0
  11. data/Gemfile +27 -0
  12. data/LICENSE +21 -0
  13. data/RAGEL_MIGRATION.md +60 -0
  14. data/README.md +292 -0
  15. data/Rakefile +209 -0
  16. data/benchmarks/benchmark_harness.rb +193 -0
  17. data/benchmarks/benchmark_merging.rb +121 -0
  18. data/benchmarks/benchmark_optimization_comparison.rb +168 -0
  19. data/benchmarks/benchmark_parsing.rb +153 -0
  20. data/benchmarks/benchmark_ragel_removal.rb +56 -0
  21. data/benchmarks/benchmark_runner.rb +70 -0
  22. data/benchmarks/benchmark_serialization.rb +180 -0
  23. data/benchmarks/benchmark_shorthand.rb +109 -0
  24. data/benchmarks/benchmark_shorthand_expansion.rb +176 -0
  25. data/benchmarks/benchmark_specificity.rb +124 -0
  26. data/benchmarks/benchmark_string_allocation.rb +151 -0
  27. data/benchmarks/benchmark_stylesheet_to_s.rb +62 -0
  28. data/benchmarks/benchmark_to_s_cached.rb +55 -0
  29. data/benchmarks/benchmark_value_splitter.rb +54 -0
  30. data/benchmarks/benchmark_yjit.rb +158 -0
  31. data/benchmarks/benchmark_yjit_workers.rb +61 -0
  32. data/benchmarks/profile_to_s.rb +23 -0
  33. data/benchmarks/speedup_calculator.rb +83 -0
  34. data/benchmarks/system_metadata.rb +81 -0
  35. data/benchmarks/templates/benchmarks.md.erb +221 -0
  36. data/benchmarks/yjit_tests.rb +141 -0
  37. data/cataract.gemspec +34 -0
  38. data/cliff.toml +92 -0
  39. data/examples/color_conversion_visual_test/color_conversion_test.html +3603 -0
  40. data/examples/color_conversion_visual_test/generate.rb +202 -0
  41. data/examples/color_conversion_visual_test/template.html.erb +259 -0
  42. data/examples/css_analyzer/analyzer.rb +164 -0
  43. data/examples/css_analyzer/analyzers/base.rb +33 -0
  44. data/examples/css_analyzer/analyzers/colors.rb +133 -0
  45. data/examples/css_analyzer/analyzers/important.rb +88 -0
  46. data/examples/css_analyzer/analyzers/properties.rb +61 -0
  47. data/examples/css_analyzer/analyzers/specificity.rb +68 -0
  48. data/examples/css_analyzer/templates/report.html.erb +575 -0
  49. data/examples/css_analyzer.rb +69 -0
  50. data/examples/github_analysis.html +5343 -0
  51. data/ext/cataract/cataract.c +1086 -0
  52. data/ext/cataract/cataract.h +174 -0
  53. data/ext/cataract/css_parser.c +1435 -0
  54. data/ext/cataract/extconf.rb +48 -0
  55. data/ext/cataract/import_scanner.c +174 -0
  56. data/ext/cataract/merge.c +973 -0
  57. data/ext/cataract/shorthand_expander.c +902 -0
  58. data/ext/cataract/specificity.c +213 -0
  59. data/ext/cataract/value_splitter.c +116 -0
  60. data/ext/cataract_color/cataract_color.c +16 -0
  61. data/ext/cataract_color/color_conversion.c +1687 -0
  62. data/ext/cataract_color/color_conversion.h +136 -0
  63. data/ext/cataract_color/color_conversion_lab.c +571 -0
  64. data/ext/cataract_color/color_conversion_named.c +259 -0
  65. data/ext/cataract_color/color_conversion_oklab.c +547 -0
  66. data/ext/cataract_color/extconf.rb +23 -0
  67. data/ext/cataract_old/cataract.c +393 -0
  68. data/ext/cataract_old/cataract.h +250 -0
  69. data/ext/cataract_old/css_parser.c +933 -0
  70. data/ext/cataract_old/extconf.rb +67 -0
  71. data/ext/cataract_old/import_scanner.c +174 -0
  72. data/ext/cataract_old/merge.c +776 -0
  73. data/ext/cataract_old/shorthand_expander.c +902 -0
  74. data/ext/cataract_old/specificity.c +213 -0
  75. data/ext/cataract_old/stylesheet.c +290 -0
  76. data/ext/cataract_old/value_splitter.c +116 -0
  77. data/lib/cataract/at_rule.rb +97 -0
  78. data/lib/cataract/color_conversion.rb +18 -0
  79. data/lib/cataract/declarations.rb +332 -0
  80. data/lib/cataract/import_resolver.rb +210 -0
  81. data/lib/cataract/rule.rb +131 -0
  82. data/lib/cataract/stylesheet.rb +716 -0
  83. data/lib/cataract/stylesheet_scope.rb +257 -0
  84. data/lib/cataract/version.rb +5 -0
  85. data/lib/cataract.rb +107 -0
  86. data/lib/tasks/gem.rake +158 -0
  87. data/scripts/fuzzer/run.rb +828 -0
  88. data/scripts/fuzzer/worker.rb +99 -0
  89. data/scripts/generate_benchmarks_md.rb +155 -0
  90. metadata +135 -0
@@ -0,0 +1,3603 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Cataract Color Conversion Visual Test</title>
7
+
8
+ <!-- Bootstrap CSS -->
9
+ <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
10
+
11
+ <style>
12
+ body {
13
+ background: #f8f9fa;
14
+ }
15
+ .color-cell {
16
+ width: 80px;
17
+ height: 40px;
18
+ border: 1px solid #dee2e6;
19
+ border-radius: 4px;
20
+ display: inline-block;
21
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
22
+ cursor: help;
23
+ }
24
+ .match-indicator {
25
+ font-size: 1.5em;
26
+ }
27
+ .match-indicator.perfect { color: #198754; }
28
+ .match-indicator.close { color: #ffc107; }
29
+ .match-indicator.off { color: #dc3545; }
30
+ .stat-value {
31
+ font-size: 2.5em;
32
+ font-weight: bold;
33
+ color: #0d6efd;
34
+ }
35
+ </style>
36
+ </head>
37
+ <body>
38
+ <div class="container-fluid py-5">
39
+ <h1 class="mb-4">🎨 Cataract Color Conversion Visual Test</h1>
40
+
41
+ <div class="card mb-4">
42
+ <div class="card-body">
43
+ <p><strong>Purpose:</strong> This page visually validates color conversions across different CSS color formats.</p>
44
+ <p>If conversions are correct, all color swatches in each row should appear identical.</p>
45
+ <p><strong>Tip:</strong> Hover over any color swatch to see the CSS color value.</p>
46
+ <p class="mb-0"><strong>Generated:</strong> 2025-11-06 08:12:10</p>
47
+ </div>
48
+ </div>
49
+
50
+ <!-- Tabs for Forward/Reverse Conversion -->
51
+ <ul class="nav nav-tabs mb-3" id="conversionTabs" role="tablist">
52
+ <li class="nav-item" role="presentation">
53
+ <button class="nav-link active" id="forward-tab" data-bs-toggle="tab" data-bs-target="#forward" type="button" role="tab" aria-controls="forward" aria-selected="true">
54
+ Forward: Named → RGB → HWB → HSL → Oklab → Lab → LCH
55
+ </button>
56
+ </li>
57
+ <li class="nav-item" role="presentation">
58
+ <button class="nav-link" id="reverse-tab" data-bs-toggle="tab" data-bs-target="#reverse" type="button" role="tab" aria-controls="reverse" aria-selected="false">
59
+ Reverse: LCH → Lab → Oklab → HSL → HWB → RGB → Hex
60
+ </button>
61
+ </li>
62
+ </ul>
63
+
64
+ <div class="tab-content mb-5" id="conversionTabContent">
65
+ <!-- Forward conversion tab -->
66
+ <div class="tab-pane fade show active" id="forward" role="tabpanel" aria-labelledby="forward-tab">
67
+ <p class="text-muted mb-3">Starting from named colors, converting through each format. All swatches should match.</p>
68
+
69
+ <div class="table-responsive">
70
+ <table class="table table-striped table-hover">
71
+ <thead class="table-light">
72
+ <tr>
73
+ <th>Color Name</th>
74
+ <th>Named</th>
75
+ <th>RGB</th>
76
+ <th>HWB</th>
77
+ <th>HSL</th>
78
+ <th>Oklab</th>
79
+ <th>Lab</th>
80
+ <th>LCH</th>
81
+ </tr>
82
+ </thead>
83
+ <tbody>
84
+
85
+ <tr>
86
+ <td class="fw-bold">red</td>
87
+ <td>
88
+ <div class="color-cell" style="background-color: red;"
89
+ data-bs-toggle="tooltip" data-bs-placement="top"
90
+ title="red"></div>
91
+ </td>
92
+ <td>
93
+ <div class="color-cell" style="background-color: rgb(255 0 0);"
94
+ data-bs-toggle="tooltip" data-bs-placement="top"
95
+ title="rgb(255 0 0)"></div>
96
+ </td>
97
+ <td>
98
+ <div class="color-cell" style="background-color: hwb(0 0% 0%);"
99
+ data-bs-toggle="tooltip" data-bs-placement="top"
100
+ title="hwb(0 0% 0%)"></div>
101
+ </td>
102
+ <td>
103
+ <div class="color-cell" style="background-color: hsl(0, 100%, 50%);"
104
+ data-bs-toggle="tooltip" data-bs-placement="top"
105
+ title="hsl(0, 100%, 50%)"></div>
106
+ </td>
107
+ <td>
108
+ <div class="color-cell" style="background-color: oklab(0.6280 0.2249 0.1258);"
109
+ data-bs-toggle="tooltip" data-bs-placement="top"
110
+ title="oklab(0.6280 0.2249 0.1258)"></div>
111
+ </td>
112
+ <td>
113
+ <div class="color-cell" style="background-color: lab(54.2990% 80.8260 69.8412);"
114
+ data-bs-toggle="tooltip" data-bs-placement="top"
115
+ title="lab(54.2990% 80.8260 69.8412)"></div>
116
+ </td>
117
+ <td>
118
+ <div class="color-cell" style="background-color: lch(54.2990% 106.8206 40.830);"
119
+ data-bs-toggle="tooltip" data-bs-placement="top"
120
+ title="lch(54.2990% 106.8206 40.830)"></div>
121
+ </td>
122
+ </tr>
123
+
124
+ <tr>
125
+ <td class="fw-bold">green</td>
126
+ <td>
127
+ <div class="color-cell" style="background-color: green;"
128
+ data-bs-toggle="tooltip" data-bs-placement="top"
129
+ title="green"></div>
130
+ </td>
131
+ <td>
132
+ <div class="color-cell" style="background-color: rgb(0 128 0);"
133
+ data-bs-toggle="tooltip" data-bs-placement="top"
134
+ title="rgb(0 128 0)"></div>
135
+ </td>
136
+ <td>
137
+ <div class="color-cell" style="background-color: hwb(120 0% 50%);"
138
+ data-bs-toggle="tooltip" data-bs-placement="top"
139
+ title="hwb(120 0% 50%)"></div>
140
+ </td>
141
+ <td>
142
+ <div class="color-cell" style="background-color: hsl(120, 100%, 25%);"
143
+ data-bs-toggle="tooltip" data-bs-placement="top"
144
+ title="hsl(120, 100%, 25%)"></div>
145
+ </td>
146
+ <td>
147
+ <div class="color-cell" style="background-color: oklab(0.5198 -0.1403 0.1077);"
148
+ data-bs-toggle="tooltip" data-bs-placement="top"
149
+ title="oklab(0.5198 -0.1403 0.1077)"></div>
150
+ </td>
151
+ <td>
152
+ <div class="color-cell" style="background-color: lab(46.2828% -47.5431 48.6026);"
153
+ data-bs-toggle="tooltip" data-bs-placement="top"
154
+ title="lab(46.2828% -47.5431 48.6026)"></div>
155
+ </td>
156
+ <td>
157
+ <div class="color-cell" style="background-color: lch(46.2828% 67.9894 134.369);"
158
+ data-bs-toggle="tooltip" data-bs-placement="top"
159
+ title="lch(46.2828% 67.9894 134.369)"></div>
160
+ </td>
161
+ </tr>
162
+
163
+ <tr>
164
+ <td class="fw-bold">blue</td>
165
+ <td>
166
+ <div class="color-cell" style="background-color: blue;"
167
+ data-bs-toggle="tooltip" data-bs-placement="top"
168
+ title="blue"></div>
169
+ </td>
170
+ <td>
171
+ <div class="color-cell" style="background-color: rgb(0 0 255);"
172
+ data-bs-toggle="tooltip" data-bs-placement="top"
173
+ title="rgb(0 0 255)"></div>
174
+ </td>
175
+ <td>
176
+ <div class="color-cell" style="background-color: hwb(240 0% 0%);"
177
+ data-bs-toggle="tooltip" data-bs-placement="top"
178
+ title="hwb(240 0% 0%)"></div>
179
+ </td>
180
+ <td>
181
+ <div class="color-cell" style="background-color: hsl(240, 100%, 50%);"
182
+ data-bs-toggle="tooltip" data-bs-placement="top"
183
+ title="hsl(240, 100%, 50%)"></div>
184
+ </td>
185
+ <td>
186
+ <div class="color-cell" style="background-color: oklab(0.4520 -0.0325 -0.3115);"
187
+ data-bs-toggle="tooltip" data-bs-placement="top"
188
+ title="oklab(0.4520 -0.0325 -0.3115)"></div>
189
+ </td>
190
+ <td>
191
+ <div class="color-cell" style="background-color: lab(29.5649% 68.2686 -112.0017);"
192
+ data-bs-toggle="tooltip" data-bs-placement="top"
193
+ title="lab(29.5649% 68.2686 -112.0017)"></div>
194
+ </td>
195
+ <td>
196
+ <div class="color-cell" style="background-color: lch(29.5649% 131.1678 301.364);"
197
+ data-bs-toggle="tooltip" data-bs-placement="top"
198
+ title="lch(29.5649% 131.1678 301.364)"></div>
199
+ </td>
200
+ </tr>
201
+
202
+ <tr>
203
+ <td class="fw-bold">yellow</td>
204
+ <td>
205
+ <div class="color-cell" style="background-color: yellow;"
206
+ data-bs-toggle="tooltip" data-bs-placement="top"
207
+ title="yellow"></div>
208
+ </td>
209
+ <td>
210
+ <div class="color-cell" style="background-color: rgb(255 255 0);"
211
+ data-bs-toggle="tooltip" data-bs-placement="top"
212
+ title="rgb(255 255 0)"></div>
213
+ </td>
214
+ <td>
215
+ <div class="color-cell" style="background-color: hwb(60 0% 0%);"
216
+ data-bs-toggle="tooltip" data-bs-placement="top"
217
+ title="hwb(60 0% 0%)"></div>
218
+ </td>
219
+ <td>
220
+ <div class="color-cell" style="background-color: hsl(60, 100%, 50%);"
221
+ data-bs-toggle="tooltip" data-bs-placement="top"
222
+ title="hsl(60, 100%, 50%)"></div>
223
+ </td>
224
+ <td>
225
+ <div class="color-cell" style="background-color: oklab(0.9680 -0.0714 0.1986);"
226
+ data-bs-toggle="tooltip" data-bs-placement="top"
227
+ title="oklab(0.9680 -0.0714 0.1986)"></div>
228
+ </td>
229
+ <td>
230
+ <div class="color-cell" style="background-color: lab(97.6102% -15.7376 93.4196);"
231
+ data-bs-toggle="tooltip" data-bs-placement="top"
232
+ title="lab(97.6102% -15.7376 93.4196)"></div>
233
+ </td>
234
+ <td>
235
+ <div class="color-cell" style="background-color: lch(97.6102% 94.7360 99.562);"
236
+ data-bs-toggle="tooltip" data-bs-placement="top"
237
+ title="lch(97.6102% 94.7360 99.562)"></div>
238
+ </td>
239
+ </tr>
240
+
241
+ <tr>
242
+ <td class="fw-bold">cyan</td>
243
+ <td>
244
+ <div class="color-cell" style="background-color: cyan;"
245
+ data-bs-toggle="tooltip" data-bs-placement="top"
246
+ title="cyan"></div>
247
+ </td>
248
+ <td>
249
+ <div class="color-cell" style="background-color: rgb(0 255 255);"
250
+ data-bs-toggle="tooltip" data-bs-placement="top"
251
+ title="rgb(0 255 255)"></div>
252
+ </td>
253
+ <td>
254
+ <div class="color-cell" style="background-color: hwb(180 0% 0%);"
255
+ data-bs-toggle="tooltip" data-bs-placement="top"
256
+ title="hwb(180 0% 0%)"></div>
257
+ </td>
258
+ <td>
259
+ <div class="color-cell" style="background-color: hsl(180, 100%, 50%);"
260
+ data-bs-toggle="tooltip" data-bs-placement="top"
261
+ title="hsl(180, 100%, 50%)"></div>
262
+ </td>
263
+ <td>
264
+ <div class="color-cell" style="background-color: oklab(0.9054 -0.1494 -0.0394);"
265
+ data-bs-toggle="tooltip" data-bs-placement="top"
266
+ title="oklab(0.9054 -0.1494 -0.0394)"></div>
267
+ </td>
268
+ <td>
269
+ <div class="color-cell" style="background-color: lab(90.6641% -50.6351 -14.9421);"
270
+ data-bs-toggle="tooltip" data-bs-placement="top"
271
+ title="lab(90.6641% -50.6351 -14.9421)"></div>
272
+ </td>
273
+ <td>
274
+ <div class="color-cell" style="background-color: lch(90.6641% 52.7937 196.441);"
275
+ data-bs-toggle="tooltip" data-bs-placement="top"
276
+ title="lch(90.6641% 52.7937 196.441)"></div>
277
+ </td>
278
+ </tr>
279
+
280
+ <tr>
281
+ <td class="fw-bold">magenta</td>
282
+ <td>
283
+ <div class="color-cell" style="background-color: magenta;"
284
+ data-bs-toggle="tooltip" data-bs-placement="top"
285
+ title="magenta"></div>
286
+ </td>
287
+ <td>
288
+ <div class="color-cell" style="background-color: rgb(255 0 255);"
289
+ data-bs-toggle="tooltip" data-bs-placement="top"
290
+ title="rgb(255 0 255)"></div>
291
+ </td>
292
+ <td>
293
+ <div class="color-cell" style="background-color: hwb(300 0% 0%);"
294
+ data-bs-toggle="tooltip" data-bs-placement="top"
295
+ title="hwb(300 0% 0%)"></div>
296
+ </td>
297
+ <td>
298
+ <div class="color-cell" style="background-color: hsl(300, 100%, 50%);"
299
+ data-bs-toggle="tooltip" data-bs-placement="top"
300
+ title="hsl(300, 100%, 50%)"></div>
301
+ </td>
302
+ <td>
303
+ <div class="color-cell" style="background-color: oklab(0.7017 0.2746 -0.1692);"
304
+ data-bs-toggle="tooltip" data-bs-placement="top"
305
+ title="oklab(0.7017 0.2746 -0.1692)"></div>
306
+ </td>
307
+ <td>
308
+ <div class="color-cell" style="background-color: lab(60.1727% 93.5649 -60.4900);"
309
+ data-bs-toggle="tooltip" data-bs-placement="top"
310
+ title="lab(60.1727% 93.5649 -60.4900)"></div>
311
+ </td>
312
+ <td>
313
+ <div class="color-cell" style="background-color: lch(60.1727% 111.4156 327.117);"
314
+ data-bs-toggle="tooltip" data-bs-placement="top"
315
+ title="lch(60.1727% 111.4156 327.117)"></div>
316
+ </td>
317
+ </tr>
318
+
319
+ <tr>
320
+ <td class="fw-bold">white</td>
321
+ <td>
322
+ <div class="color-cell" style="background-color: white;"
323
+ data-bs-toggle="tooltip" data-bs-placement="top"
324
+ title="white"></div>
325
+ </td>
326
+ <td>
327
+ <div class="color-cell" style="background-color: rgb(255 255 255);"
328
+ data-bs-toggle="tooltip" data-bs-placement="top"
329
+ title="rgb(255 255 255)"></div>
330
+ </td>
331
+ <td>
332
+ <div class="color-cell" style="background-color: hwb(0 100% 0%);"
333
+ data-bs-toggle="tooltip" data-bs-placement="top"
334
+ title="hwb(0 100% 0%)"></div>
335
+ </td>
336
+ <td>
337
+ <div class="color-cell" style="background-color: hsl(0, 0%, 100%);"
338
+ data-bs-toggle="tooltip" data-bs-placement="top"
339
+ title="hsl(0, 0%, 100%)"></div>
340
+ </td>
341
+ <td>
342
+ <div class="color-cell" style="background-color: oklab(1.0000 0.0000 0.0000);"
343
+ data-bs-toggle="tooltip" data-bs-placement="top"
344
+ title="oklab(1.0000 0.0000 0.0000)"></div>
345
+ </td>
346
+ <td>
347
+ <div class="color-cell" style="background-color: lab(100.0002% 0.0169 0.0227);"
348
+ data-bs-toggle="tooltip" data-bs-placement="top"
349
+ title="lab(100.0002% 0.0169 0.0227)"></div>
350
+ </td>
351
+ <td>
352
+ <div class="color-cell" style="background-color: lch(100.0000% 0.0283 53.392);"
353
+ data-bs-toggle="tooltip" data-bs-placement="top"
354
+ title="lch(100.0000% 0.0283 53.392)"></div>
355
+ </td>
356
+ </tr>
357
+
358
+ <tr>
359
+ <td class="fw-bold">black</td>
360
+ <td>
361
+ <div class="color-cell" style="background-color: black;"
362
+ data-bs-toggle="tooltip" data-bs-placement="top"
363
+ title="black"></div>
364
+ </td>
365
+ <td>
366
+ <div class="color-cell" style="background-color: rgb(0 0 0);"
367
+ data-bs-toggle="tooltip" data-bs-placement="top"
368
+ title="rgb(0 0 0)"></div>
369
+ </td>
370
+ <td>
371
+ <div class="color-cell" style="background-color: hwb(0 0% 100%);"
372
+ data-bs-toggle="tooltip" data-bs-placement="top"
373
+ title="hwb(0 0% 100%)"></div>
374
+ </td>
375
+ <td>
376
+ <div class="color-cell" style="background-color: hsl(0, 0%, 0%);"
377
+ data-bs-toggle="tooltip" data-bs-placement="top"
378
+ title="hsl(0, 0%, 0%)"></div>
379
+ </td>
380
+ <td>
381
+ <div class="color-cell" style="background-color: oklab(0.0000 0.0000 0.0000);"
382
+ data-bs-toggle="tooltip" data-bs-placement="top"
383
+ title="oklab(0.0000 0.0000 0.0000)"></div>
384
+ </td>
385
+ <td>
386
+ <div class="color-cell" style="background-color: lab(-0.0000% 0.0000 0.0000);"
387
+ data-bs-toggle="tooltip" data-bs-placement="top"
388
+ title="lab(-0.0000% 0.0000 0.0000)"></div>
389
+ </td>
390
+ <td>
391
+ <div class="color-cell" style="background-color: lch(-0.0000% 0.0000 0.000);"
392
+ data-bs-toggle="tooltip" data-bs-placement="top"
393
+ title="lch(-0.0000% 0.0000 0.000)"></div>
394
+ </td>
395
+ </tr>
396
+
397
+ <tr>
398
+ <td class="fw-bold">gray</td>
399
+ <td>
400
+ <div class="color-cell" style="background-color: gray;"
401
+ data-bs-toggle="tooltip" data-bs-placement="top"
402
+ title="gray"></div>
403
+ </td>
404
+ <td>
405
+ <div class="color-cell" style="background-color: rgb(128 128 128);"
406
+ data-bs-toggle="tooltip" data-bs-placement="top"
407
+ title="rgb(128 128 128)"></div>
408
+ </td>
409
+ <td>
410
+ <div class="color-cell" style="background-color: hwb(0 50% 50%);"
411
+ data-bs-toggle="tooltip" data-bs-placement="top"
412
+ title="hwb(0 50% 50%)"></div>
413
+ </td>
414
+ <td>
415
+ <div class="color-cell" style="background-color: hsl(0, 0%, 50%);"
416
+ data-bs-toggle="tooltip" data-bs-placement="top"
417
+ title="hsl(0, 0%, 50%)"></div>
418
+ </td>
419
+ <td>
420
+ <div class="color-cell" style="background-color: oklab(0.5999 0.0000 0.0000);"
421
+ data-bs-toggle="tooltip" data-bs-placement="top"
422
+ title="oklab(0.5999 0.0000 0.0000)"></div>
423
+ </td>
424
+ <td>
425
+ <div class="color-cell" style="background-color: lab(53.5885% 0.0101 0.0136);"
426
+ data-bs-toggle="tooltip" data-bs-placement="top"
427
+ title="lab(53.5885% 0.0101 0.0136)"></div>
428
+ </td>
429
+ <td>
430
+ <div class="color-cell" style="background-color: lch(53.5885% 0.0169 53.461);"
431
+ data-bs-toggle="tooltip" data-bs-placement="top"
432
+ title="lch(53.5885% 0.0169 53.461)"></div>
433
+ </td>
434
+ </tr>
435
+
436
+ <tr>
437
+ <td class="fw-bold">silver</td>
438
+ <td>
439
+ <div class="color-cell" style="background-color: silver;"
440
+ data-bs-toggle="tooltip" data-bs-placement="top"
441
+ title="silver"></div>
442
+ </td>
443
+ <td>
444
+ <div class="color-cell" style="background-color: rgb(192 192 192);"
445
+ data-bs-toggle="tooltip" data-bs-placement="top"
446
+ title="rgb(192 192 192)"></div>
447
+ </td>
448
+ <td>
449
+ <div class="color-cell" style="background-color: hwb(0 75% 25%);"
450
+ data-bs-toggle="tooltip" data-bs-placement="top"
451
+ title="hwb(0 75% 25%)"></div>
452
+ </td>
453
+ <td>
454
+ <div class="color-cell" style="background-color: hsl(0, 0%, 75%);"
455
+ data-bs-toggle="tooltip" data-bs-placement="top"
456
+ title="hsl(0, 0%, 75%)"></div>
457
+ </td>
458
+ <td>
459
+ <div class="color-cell" style="background-color: oklab(0.8047 0.0000 0.0000);"
460
+ data-bs-toggle="tooltip" data-bs-placement="top"
461
+ title="oklab(0.8047 0.0000 0.0000)"></div>
462
+ </td>
463
+ <td>
464
+ <div class="color-cell" style="background-color: lab(77.3453% 0.0136 0.0182);"
465
+ data-bs-toggle="tooltip" data-bs-placement="top"
466
+ title="lab(77.3453% 0.0136 0.0182)"></div>
467
+ </td>
468
+ <td>
469
+ <div class="color-cell" style="background-color: lch(77.3453% 0.0227 53.291);"
470
+ data-bs-toggle="tooltip" data-bs-placement="top"
471
+ title="lch(77.3453% 0.0227 53.291)"></div>
472
+ </td>
473
+ </tr>
474
+
475
+ <tr>
476
+ <td class="fw-bold">maroon</td>
477
+ <td>
478
+ <div class="color-cell" style="background-color: maroon;"
479
+ data-bs-toggle="tooltip" data-bs-placement="top"
480
+ title="maroon"></div>
481
+ </td>
482
+ <td>
483
+ <div class="color-cell" style="background-color: rgb(128 0 0);"
484
+ data-bs-toggle="tooltip" data-bs-placement="top"
485
+ title="rgb(128 0 0)"></div>
486
+ </td>
487
+ <td>
488
+ <div class="color-cell" style="background-color: hwb(0 0% 50%);"
489
+ data-bs-toggle="tooltip" data-bs-placement="top"
490
+ title="hwb(0 0% 50%)"></div>
491
+ </td>
492
+ <td>
493
+ <div class="color-cell" style="background-color: hsl(0, 100%, 25%);"
494
+ data-bs-toggle="tooltip" data-bs-placement="top"
495
+ title="hsl(0, 100%, 25%)"></div>
496
+ </td>
497
+ <td>
498
+ <div class="color-cell" style="background-color: oklab(0.3767 0.1349 0.0755);"
499
+ data-bs-toggle="tooltip" data-bs-placement="top"
500
+ title="oklab(0.3767 0.1349 0.0755)"></div>
501
+ </td>
502
+ <td>
503
+ <div class="color-cell" style="background-color: lab(26.1683% 48.4855 39.4487);"
504
+ data-bs-toggle="tooltip" data-bs-placement="top"
505
+ title="lab(26.1683% 48.4855 39.4487)"></div>
506
+ </td>
507
+ <td>
508
+ <div class="color-cell" style="background-color: lch(26.1683% 62.5063 39.132);"
509
+ data-bs-toggle="tooltip" data-bs-placement="top"
510
+ title="lch(26.1683% 62.5063 39.132)"></div>
511
+ </td>
512
+ </tr>
513
+
514
+ <tr>
515
+ <td class="fw-bold">olive</td>
516
+ <td>
517
+ <div class="color-cell" style="background-color: olive;"
518
+ data-bs-toggle="tooltip" data-bs-placement="top"
519
+ title="olive"></div>
520
+ </td>
521
+ <td>
522
+ <div class="color-cell" style="background-color: rgb(128 128 0);"
523
+ data-bs-toggle="tooltip" data-bs-placement="top"
524
+ title="rgb(128 128 0)"></div>
525
+ </td>
526
+ <td>
527
+ <div class="color-cell" style="background-color: hwb(60 0% 50%);"
528
+ data-bs-toggle="tooltip" data-bs-placement="top"
529
+ title="hwb(60 0% 50%)"></div>
530
+ </td>
531
+ <td>
532
+ <div class="color-cell" style="background-color: hsl(60, 100%, 25%);"
533
+ data-bs-toggle="tooltip" data-bs-placement="top"
534
+ title="hsl(60, 100%, 25%)"></div>
535
+ </td>
536
+ <td>
537
+ <div class="color-cell" style="background-color: oklab(0.5807 -0.0428 0.1191);"
538
+ data-bs-toggle="tooltip" data-bs-placement="top"
539
+ title="oklab(0.5807 -0.0428 0.1191)"></div>
540
+ </td>
541
+ <td>
542
+ <div class="color-cell" style="background-color: lab(52.1540% -9.4328 56.0143);"
543
+ data-bs-toggle="tooltip" data-bs-placement="top"
544
+ title="lab(52.1540% -9.4328 56.0143)"></div>
545
+ </td>
546
+ <td>
547
+ <div class="color-cell" style="background-color: lch(52.1540% 56.8030 99.559);"
548
+ data-bs-toggle="tooltip" data-bs-placement="top"
549
+ title="lch(52.1540% 56.8030 99.559)"></div>
550
+ </td>
551
+ </tr>
552
+
553
+ <tr>
554
+ <td class="fw-bold">lime</td>
555
+ <td>
556
+ <div class="color-cell" style="background-color: lime;"
557
+ data-bs-toggle="tooltip" data-bs-placement="top"
558
+ title="lime"></div>
559
+ </td>
560
+ <td>
561
+ <div class="color-cell" style="background-color: rgb(0 255 0);"
562
+ data-bs-toggle="tooltip" data-bs-placement="top"
563
+ title="rgb(0 255 0)"></div>
564
+ </td>
565
+ <td>
566
+ <div class="color-cell" style="background-color: hwb(120 0% 0%);"
567
+ data-bs-toggle="tooltip" data-bs-placement="top"
568
+ title="hwb(120 0% 0%)"></div>
569
+ </td>
570
+ <td>
571
+ <div class="color-cell" style="background-color: hsl(120, 100%, 50%);"
572
+ data-bs-toggle="tooltip" data-bs-placement="top"
573
+ title="hsl(120, 100%, 50%)"></div>
574
+ </td>
575
+ <td>
576
+ <div class="color-cell" style="background-color: oklab(0.8664 -0.2339 0.1795);"
577
+ data-bs-toggle="tooltip" data-bs-placement="top"
578
+ title="oklab(0.8664 -0.2339 0.1795)"></div>
579
+ </td>
580
+ <td>
581
+ <div class="color-cell" style="background-color: lab(87.8133% -79.2658 81.0005);"
582
+ data-bs-toggle="tooltip" data-bs-placement="top"
583
+ title="lab(87.8133% -79.2658 81.0005)"></div>
584
+ </td>
585
+ <td>
586
+ <div class="color-cell" style="background-color: lch(87.8133% 113.3321 134.380);"
587
+ data-bs-toggle="tooltip" data-bs-placement="top"
588
+ title="lch(87.8133% 113.3321 134.380)"></div>
589
+ </td>
590
+ </tr>
591
+
592
+ <tr>
593
+ <td class="fw-bold">aqua</td>
594
+ <td>
595
+ <div class="color-cell" style="background-color: aqua;"
596
+ data-bs-toggle="tooltip" data-bs-placement="top"
597
+ title="aqua"></div>
598
+ </td>
599
+ <td>
600
+ <div class="color-cell" style="background-color: rgb(0 255 255);"
601
+ data-bs-toggle="tooltip" data-bs-placement="top"
602
+ title="rgb(0 255 255)"></div>
603
+ </td>
604
+ <td>
605
+ <div class="color-cell" style="background-color: hwb(180 0% 0%);"
606
+ data-bs-toggle="tooltip" data-bs-placement="top"
607
+ title="hwb(180 0% 0%)"></div>
608
+ </td>
609
+ <td>
610
+ <div class="color-cell" style="background-color: hsl(180, 100%, 50%);"
611
+ data-bs-toggle="tooltip" data-bs-placement="top"
612
+ title="hsl(180, 100%, 50%)"></div>
613
+ </td>
614
+ <td>
615
+ <div class="color-cell" style="background-color: oklab(0.9054 -0.1494 -0.0394);"
616
+ data-bs-toggle="tooltip" data-bs-placement="top"
617
+ title="oklab(0.9054 -0.1494 -0.0394)"></div>
618
+ </td>
619
+ <td>
620
+ <div class="color-cell" style="background-color: lab(90.6641% -50.6351 -14.9421);"
621
+ data-bs-toggle="tooltip" data-bs-placement="top"
622
+ title="lab(90.6641% -50.6351 -14.9421)"></div>
623
+ </td>
624
+ <td>
625
+ <div class="color-cell" style="background-color: lch(90.6641% 52.7937 196.441);"
626
+ data-bs-toggle="tooltip" data-bs-placement="top"
627
+ title="lch(90.6641% 52.7937 196.441)"></div>
628
+ </td>
629
+ </tr>
630
+
631
+ <tr>
632
+ <td class="fw-bold">teal</td>
633
+ <td>
634
+ <div class="color-cell" style="background-color: teal;"
635
+ data-bs-toggle="tooltip" data-bs-placement="top"
636
+ title="teal"></div>
637
+ </td>
638
+ <td>
639
+ <div class="color-cell" style="background-color: rgb(0 128 128);"
640
+ data-bs-toggle="tooltip" data-bs-placement="top"
641
+ title="rgb(0 128 128)"></div>
642
+ </td>
643
+ <td>
644
+ <div class="color-cell" style="background-color: hwb(180 0% 50%);"
645
+ data-bs-toggle="tooltip" data-bs-placement="top"
646
+ title="hwb(180 0% 50%)"></div>
647
+ </td>
648
+ <td>
649
+ <div class="color-cell" style="background-color: hsl(180, 100%, 25%);"
650
+ data-bs-toggle="tooltip" data-bs-placement="top"
651
+ title="hsl(180, 100%, 25%)"></div>
652
+ </td>
653
+ <td>
654
+ <div class="color-cell" style="background-color: oklab(0.5431 -0.0896 -0.0236);"
655
+ data-bs-toggle="tooltip" data-bs-placement="top"
656
+ title="oklab(0.5431 -0.0896 -0.0236)"></div>
657
+ </td>
658
+ <td>
659
+ <div class="color-cell" style="background-color: lab(47.9820% -30.3691 -8.9506);"
660
+ data-bs-toggle="tooltip" data-bs-placement="top"
661
+ title="lab(47.9820% -30.3691 -8.9506)"></div>
662
+ </td>
663
+ <td>
664
+ <div class="color-cell" style="background-color: lch(47.9820% 31.6606 196.422);"
665
+ data-bs-toggle="tooltip" data-bs-placement="top"
666
+ title="lch(47.9820% 31.6606 196.422)"></div>
667
+ </td>
668
+ </tr>
669
+
670
+ <tr>
671
+ <td class="fw-bold">navy</td>
672
+ <td>
673
+ <div class="color-cell" style="background-color: navy;"
674
+ data-bs-toggle="tooltip" data-bs-placement="top"
675
+ title="navy"></div>
676
+ </td>
677
+ <td>
678
+ <div class="color-cell" style="background-color: rgb(0 0 128);"
679
+ data-bs-toggle="tooltip" data-bs-placement="top"
680
+ title="rgb(0 0 128)"></div>
681
+ </td>
682
+ <td>
683
+ <div class="color-cell" style="background-color: hwb(240 0% 50%);"
684
+ data-bs-toggle="tooltip" data-bs-placement="top"
685
+ title="hwb(240 0% 50%)"></div>
686
+ </td>
687
+ <td>
688
+ <div class="color-cell" style="background-color: hsl(240, 100%, 25%);"
689
+ data-bs-toggle="tooltip" data-bs-placement="top"
690
+ title="hsl(240, 100%, 25%)"></div>
691
+ </td>
692
+ <td>
693
+ <div class="color-cell" style="background-color: oklab(0.2711 -0.0195 -0.1869);"
694
+ data-bs-toggle="tooltip" data-bs-placement="top"
695
+ title="oklab(0.2711 -0.0195 -0.1869)"></div>
696
+ </td>
697
+ <td>
698
+ <div class="color-cell" style="background-color: lab(11.3254% 40.9801 -67.2031);"
699
+ data-bs-toggle="tooltip" data-bs-placement="top"
700
+ title="lab(11.3254% 40.9801 -67.2031)"></div>
701
+ </td>
702
+ <td>
703
+ <div class="color-cell" style="background-color: lch(11.3254% 78.7123 301.375);"
704
+ data-bs-toggle="tooltip" data-bs-placement="top"
705
+ title="lch(11.3254% 78.7123 301.375)"></div>
706
+ </td>
707
+ </tr>
708
+
709
+ <tr>
710
+ <td class="fw-bold">fuchsia</td>
711
+ <td>
712
+ <div class="color-cell" style="background-color: fuchsia;"
713
+ data-bs-toggle="tooltip" data-bs-placement="top"
714
+ title="fuchsia"></div>
715
+ </td>
716
+ <td>
717
+ <div class="color-cell" style="background-color: rgb(255 0 255);"
718
+ data-bs-toggle="tooltip" data-bs-placement="top"
719
+ title="rgb(255 0 255)"></div>
720
+ </td>
721
+ <td>
722
+ <div class="color-cell" style="background-color: hwb(300 0% 0%);"
723
+ data-bs-toggle="tooltip" data-bs-placement="top"
724
+ title="hwb(300 0% 0%)"></div>
725
+ </td>
726
+ <td>
727
+ <div class="color-cell" style="background-color: hsl(300, 100%, 50%);"
728
+ data-bs-toggle="tooltip" data-bs-placement="top"
729
+ title="hsl(300, 100%, 50%)"></div>
730
+ </td>
731
+ <td>
732
+ <div class="color-cell" style="background-color: oklab(0.7017 0.2746 -0.1692);"
733
+ data-bs-toggle="tooltip" data-bs-placement="top"
734
+ title="oklab(0.7017 0.2746 -0.1692)"></div>
735
+ </td>
736
+ <td>
737
+ <div class="color-cell" style="background-color: lab(60.1727% 93.5649 -60.4900);"
738
+ data-bs-toggle="tooltip" data-bs-placement="top"
739
+ title="lab(60.1727% 93.5649 -60.4900)"></div>
740
+ </td>
741
+ <td>
742
+ <div class="color-cell" style="background-color: lch(60.1727% 111.4156 327.117);"
743
+ data-bs-toggle="tooltip" data-bs-placement="top"
744
+ title="lch(60.1727% 111.4156 327.117)"></div>
745
+ </td>
746
+ </tr>
747
+
748
+ <tr>
749
+ <td class="fw-bold">purple</td>
750
+ <td>
751
+ <div class="color-cell" style="background-color: purple;"
752
+ data-bs-toggle="tooltip" data-bs-placement="top"
753
+ title="purple"></div>
754
+ </td>
755
+ <td>
756
+ <div class="color-cell" style="background-color: rgb(128 0 128);"
757
+ data-bs-toggle="tooltip" data-bs-placement="top"
758
+ title="rgb(128 0 128)"></div>
759
+ </td>
760
+ <td>
761
+ <div class="color-cell" style="background-color: hwb(300 0% 50%);"
762
+ data-bs-toggle="tooltip" data-bs-placement="top"
763
+ title="hwb(300 0% 50%)"></div>
764
+ </td>
765
+ <td>
766
+ <div class="color-cell" style="background-color: hsl(300, 100%, 25%);"
767
+ data-bs-toggle="tooltip" data-bs-placement="top"
768
+ title="hsl(300, 100%, 25%)"></div>
769
+ </td>
770
+ <td>
771
+ <div class="color-cell" style="background-color: oklab(0.4209 0.1647 -0.1015);"
772
+ data-bs-toggle="tooltip" data-bs-placement="top"
773
+ title="oklab(0.4209 0.1647 -0.1015)"></div>
774
+ </td>
775
+ <td>
776
+ <div class="color-cell" style="background-color: lab(29.6906% 56.1201 -36.2868);"
777
+ data-bs-toggle="tooltip" data-bs-placement="top"
778
+ title="lab(29.6906% 56.1201 -36.2868)"></div>
779
+ </td>
780
+ <td>
781
+ <div class="color-cell" style="background-color: lch(29.6906% 66.8296 327.114);"
782
+ data-bs-toggle="tooltip" data-bs-placement="top"
783
+ title="lch(29.6906% 66.8296 327.114)"></div>
784
+ </td>
785
+ </tr>
786
+
787
+ <tr>
788
+ <td class="fw-bold">orange</td>
789
+ <td>
790
+ <div class="color-cell" style="background-color: orange;"
791
+ data-bs-toggle="tooltip" data-bs-placement="top"
792
+ title="orange"></div>
793
+ </td>
794
+ <td>
795
+ <div class="color-cell" style="background-color: rgb(255 165 0);"
796
+ data-bs-toggle="tooltip" data-bs-placement="top"
797
+ title="rgb(255 165 0)"></div>
798
+ </td>
799
+ <td>
800
+ <div class="color-cell" style="background-color: hwb(39 0% 0%);"
801
+ data-bs-toggle="tooltip" data-bs-placement="top"
802
+ title="hwb(39 0% 0%)"></div>
803
+ </td>
804
+ <td>
805
+ <div class="color-cell" style="background-color: hsl(39, 100%, 50%);"
806
+ data-bs-toggle="tooltip" data-bs-placement="top"
807
+ title="hsl(39, 100%, 50%)"></div>
808
+ </td>
809
+ <td>
810
+ <div class="color-cell" style="background-color: oklab(0.7945 0.0551 0.1618);"
811
+ data-bs-toggle="tooltip" data-bs-placement="top"
812
+ title="oklab(0.7945 0.0551 0.1618)"></div>
813
+ </td>
814
+ <td>
815
+ <div class="color-cell" style="background-color: lab(75.8216% 27.0406 79.2862);"
816
+ data-bs-toggle="tooltip" data-bs-placement="top"
817
+ title="lab(75.8216% 27.0406 79.2862)"></div>
818
+ </td>
819
+ <td>
820
+ <div class="color-cell" style="background-color: lch(75.8216% 83.7705 71.168);"
821
+ data-bs-toggle="tooltip" data-bs-placement="top"
822
+ title="lch(75.8216% 83.7705 71.168)"></div>
823
+ </td>
824
+ </tr>
825
+
826
+ <tr>
827
+ <td class="fw-bold">pink</td>
828
+ <td>
829
+ <div class="color-cell" style="background-color: pink;"
830
+ data-bs-toggle="tooltip" data-bs-placement="top"
831
+ title="pink"></div>
832
+ </td>
833
+ <td>
834
+ <div class="color-cell" style="background-color: rgb(255 192 203);"
835
+ data-bs-toggle="tooltip" data-bs-placement="top"
836
+ title="rgb(255 192 203)"></div>
837
+ </td>
838
+ <td>
839
+ <div class="color-cell" style="background-color: hwb(350 75% 0%);"
840
+ data-bs-toggle="tooltip" data-bs-placement="top"
841
+ title="hwb(350 75% 0%)"></div>
842
+ </td>
843
+ <td>
844
+ <div class="color-cell" style="background-color: hsl(350, 100%, 87%);"
845
+ data-bs-toggle="tooltip" data-bs-placement="top"
846
+ title="hsl(350, 100%, 87%)"></div>
847
+ </td>
848
+ <td>
849
+ <div class="color-cell" style="background-color: oklab(0.8616 0.0765 0.0104);"
850
+ data-bs-toggle="tooltip" data-bs-placement="top"
851
+ title="oklab(0.8616 0.0765 0.0104)"></div>
852
+ </td>
853
+ <td>
854
+ <div class="color-cell" style="background-color: lab(83.0385% 25.6300 4.3111);"
855
+ data-bs-toggle="tooltip" data-bs-placement="top"
856
+ title="lab(83.0385% 25.6300 4.3111)"></div>
857
+ </td>
858
+ <td>
859
+ <div class="color-cell" style="background-color: lch(83.0385% 25.9900 9.548);"
860
+ data-bs-toggle="tooltip" data-bs-placement="top"
861
+ title="lch(83.0385% 25.9900 9.548)"></div>
862
+ </td>
863
+ </tr>
864
+
865
+ <tr>
866
+ <td class="fw-bold">coral</td>
867
+ <td>
868
+ <div class="color-cell" style="background-color: coral;"
869
+ data-bs-toggle="tooltip" data-bs-placement="top"
870
+ title="coral"></div>
871
+ </td>
872
+ <td>
873
+ <div class="color-cell" style="background-color: rgb(255 127 80);"
874
+ data-bs-toggle="tooltip" data-bs-placement="top"
875
+ title="rgb(255 127 80)"></div>
876
+ </td>
877
+ <td>
878
+ <div class="color-cell" style="background-color: hwb(16 31% 0%);"
879
+ data-bs-toggle="tooltip" data-bs-placement="top"
880
+ title="hwb(16 31% 0%)"></div>
881
+ </td>
882
+ <td>
883
+ <div class="color-cell" style="background-color: hsl(16, 100%, 65%);"
884
+ data-bs-toggle="tooltip" data-bs-placement="top"
885
+ title="hsl(16, 100%, 65%)"></div>
886
+ </td>
887
+ <td>
888
+ <div class="color-cell" style="background-color: oklab(0.7304 0.1317 0.1098);"
889
+ data-bs-toggle="tooltip" data-bs-placement="top"
890
+ title="oklab(0.7304 0.1317 0.1098)"></div>
891
+ </td>
892
+ <td>
893
+ <div class="color-cell" style="background-color: lab(67.3952% 48.6707 49.4692);"
894
+ data-bs-toggle="tooltip" data-bs-placement="top"
895
+ title="lab(67.3952% 48.6707 49.4692)"></div>
896
+ </td>
897
+ <td>
898
+ <div class="color-cell" style="background-color: lch(67.3952% 69.3977 45.466);"
899
+ data-bs-toggle="tooltip" data-bs-placement="top"
900
+ title="lch(67.3952% 69.3977 45.466)"></div>
901
+ </td>
902
+ </tr>
903
+
904
+ <tr>
905
+ <td class="fw-bold">tomato</td>
906
+ <td>
907
+ <div class="color-cell" style="background-color: tomato;"
908
+ data-bs-toggle="tooltip" data-bs-placement="top"
909
+ title="tomato"></div>
910
+ </td>
911
+ <td>
912
+ <div class="color-cell" style="background-color: rgb(255 99 71);"
913
+ data-bs-toggle="tooltip" data-bs-placement="top"
914
+ title="rgb(255 99 71)"></div>
915
+ </td>
916
+ <td>
917
+ <div class="color-cell" style="background-color: hwb(9 28% 0%);"
918
+ data-bs-toggle="tooltip" data-bs-placement="top"
919
+ title="hwb(9 28% 0%)"></div>
920
+ </td>
921
+ <td>
922
+ <div class="color-cell" style="background-color: hsl(9, 100%, 64%);"
923
+ data-bs-toggle="tooltip" data-bs-placement="top"
924
+ title="hsl(9, 100%, 64%)"></div>
925
+ </td>
926
+ <td>
927
+ <div class="color-cell" style="background-color: oklab(0.6962 0.1652 0.1045);"
928
+ data-bs-toggle="tooltip" data-bs-placement="top"
929
+ title="oklab(0.6962 0.1652 0.1045)"></div>
930
+ </td>
931
+ <td>
932
+ <div class="color-cell" style="background-color: lab(62.9917% 59.3682 47.8692);"
933
+ data-bs-toggle="tooltip" data-bs-placement="top"
934
+ title="lab(62.9917% 59.3682 47.8692)"></div>
935
+ </td>
936
+ <td>
937
+ <div class="color-cell" style="background-color: lch(62.9917% 76.2630 38.880);"
938
+ data-bs-toggle="tooltip" data-bs-placement="top"
939
+ title="lch(62.9917% 76.2630 38.880)"></div>
940
+ </td>
941
+ </tr>
942
+
943
+ <tr>
944
+ <td class="fw-bold">gold</td>
945
+ <td>
946
+ <div class="color-cell" style="background-color: gold;"
947
+ data-bs-toggle="tooltip" data-bs-placement="top"
948
+ title="gold"></div>
949
+ </td>
950
+ <td>
951
+ <div class="color-cell" style="background-color: rgb(255 215 0);"
952
+ data-bs-toggle="tooltip" data-bs-placement="top"
953
+ title="rgb(255 215 0)"></div>
954
+ </td>
955
+ <td>
956
+ <div class="color-cell" style="background-color: hwb(51 0% 0%);"
957
+ data-bs-toggle="tooltip" data-bs-placement="top"
958
+ title="hwb(51 0% 0%)"></div>
959
+ </td>
960
+ <td>
961
+ <div class="color-cell" style="background-color: hsl(51, 100%, 50%);"
962
+ data-bs-toggle="tooltip" data-bs-placement="top"
963
+ title="hsl(51, 100%, 50%)"></div>
964
+ </td>
965
+ <td>
966
+ <div class="color-cell" style="background-color: oklab(0.8907 -0.0198 0.1822);"
967
+ data-bs-toggle="tooltip" data-bs-placement="top"
968
+ title="oklab(0.8907 -0.0198 0.1822)"></div>
969
+ </td>
970
+ <td>
971
+ <div class="color-cell" style="background-color: lab(87.9626% 1.9494 86.8572);"
972
+ data-bs-toggle="tooltip" data-bs-placement="top"
973
+ title="lab(87.9626% 1.9494 86.8572)"></div>
974
+ </td>
975
+ <td>
976
+ <div class="color-cell" style="background-color: lch(87.9626% 86.8791 88.714);"
977
+ data-bs-toggle="tooltip" data-bs-placement="top"
978
+ title="lch(87.9626% 86.8791 88.714)"></div>
979
+ </td>
980
+ </tr>
981
+
982
+ <tr>
983
+ <td class="fw-bold">indigo</td>
984
+ <td>
985
+ <div class="color-cell" style="background-color: indigo;"
986
+ data-bs-toggle="tooltip" data-bs-placement="top"
987
+ title="indigo"></div>
988
+ </td>
989
+ <td>
990
+ <div class="color-cell" style="background-color: rgb(75 0 130);"
991
+ data-bs-toggle="tooltip" data-bs-placement="top"
992
+ title="rgb(75 0 130)"></div>
993
+ </td>
994
+ <td>
995
+ <div class="color-cell" style="background-color: hwb(275 0% 49%);"
996
+ data-bs-toggle="tooltip" data-bs-placement="top"
997
+ title="hwb(275 0% 49%)"></div>
998
+ </td>
999
+ <td>
1000
+ <div class="color-cell" style="background-color: hsl(275, 100%, 25%);"
1001
+ data-bs-toggle="tooltip" data-bs-placement="top"
1002
+ title="hsl(275, 100%, 25%)"></div>
1003
+ </td>
1004
+ <td>
1005
+ <div class="color-cell" style="background-color: oklab(0.3355 0.0935 -0.1507);"
1006
+ data-bs-toggle="tooltip" data-bs-placement="top"
1007
+ title="oklab(0.3355 0.0935 -0.1507)"></div>
1008
+ </td>
1009
+ <td>
1010
+ <div class="color-cell" style="background-color: lab(19.3523% 46.5550 -53.6050);"
1011
+ data-bs-toggle="tooltip" data-bs-placement="top"
1012
+ title="lab(19.3523% 46.5550 -53.6050)"></div>
1013
+ </td>
1014
+ <td>
1015
+ <div class="color-cell" style="background-color: lch(19.3523% 70.9991 310.974);"
1016
+ data-bs-toggle="tooltip" data-bs-placement="top"
1017
+ title="lch(19.3523% 70.9991 310.974)"></div>
1018
+ </td>
1019
+ </tr>
1020
+
1021
+ <tr>
1022
+ <td class="fw-bold">violet</td>
1023
+ <td>
1024
+ <div class="color-cell" style="background-color: violet;"
1025
+ data-bs-toggle="tooltip" data-bs-placement="top"
1026
+ title="violet"></div>
1027
+ </td>
1028
+ <td>
1029
+ <div class="color-cell" style="background-color: rgb(238 130 238);"
1030
+ data-bs-toggle="tooltip" data-bs-placement="top"
1031
+ title="rgb(238 130 238)"></div>
1032
+ </td>
1033
+ <td>
1034
+ <div class="color-cell" style="background-color: hwb(300 51% 7%);"
1035
+ data-bs-toggle="tooltip" data-bs-placement="top"
1036
+ title="hwb(300 51% 7%)"></div>
1037
+ </td>
1038
+ <td>
1039
+ <div class="color-cell" style="background-color: hsl(300, 75%, 72%);"
1040
+ data-bs-toggle="tooltip" data-bs-placement="top"
1041
+ title="hsl(300, 75%, 72%)"></div>
1042
+ </td>
1043
+ <td>
1044
+ <div class="color-cell" style="background-color: oklab(0.7603 0.1552 -0.1000);"
1045
+ data-bs-toggle="tooltip" data-bs-placement="top"
1046
+ title="oklab(0.7603 0.1552 -0.1000)"></div>
1047
+ </td>
1048
+ <td>
1049
+ <div class="color-cell" style="background-color: lab(69.4575% 52.8769 -36.2303);"
1050
+ data-bs-toggle="tooltip" data-bs-placement="top"
1051
+ title="lab(69.4575% 52.8769 -36.2303)"></div>
1052
+ </td>
1053
+ <td>
1054
+ <div class="color-cell" style="background-color: lch(69.4575% 64.0984 325.582);"
1055
+ data-bs-toggle="tooltip" data-bs-placement="top"
1056
+ title="lch(69.4575% 64.0984 325.582)"></div>
1057
+ </td>
1058
+ </tr>
1059
+
1060
+ <tr>
1061
+ <td class="fw-bold">brown</td>
1062
+ <td>
1063
+ <div class="color-cell" style="background-color: brown;"
1064
+ data-bs-toggle="tooltip" data-bs-placement="top"
1065
+ title="brown"></div>
1066
+ </td>
1067
+ <td>
1068
+ <div class="color-cell" style="background-color: rgb(165 42 42);"
1069
+ data-bs-toggle="tooltip" data-bs-placement="top"
1070
+ title="rgb(165 42 42)"></div>
1071
+ </td>
1072
+ <td>
1073
+ <div class="color-cell" style="background-color: hwb(0 16% 35%);"
1074
+ data-bs-toggle="tooltip" data-bs-placement="top"
1075
+ title="hwb(0 16% 35%)"></div>
1076
+ </td>
1077
+ <td>
1078
+ <div class="color-cell" style="background-color: hsl(0, 60%, 41%);"
1079
+ data-bs-toggle="tooltip" data-bs-placement="top"
1080
+ title="hsl(0, 60%, 41%)"></div>
1081
+ </td>
1082
+ <td>
1083
+ <div class="color-cell" style="background-color: oklab(0.4842 0.1458 0.0700);"
1084
+ data-bs-toggle="tooltip" data-bs-placement="top"
1085
+ title="oklab(0.4842 0.1458 0.0700)"></div>
1086
+ </td>
1087
+ <td>
1088
+ <div class="color-cell" style="background-color: lab(38.5472% 51.0421 32.4362);"
1089
+ data-bs-toggle="tooltip" data-bs-placement="top"
1090
+ title="lab(38.5472% 51.0421 32.4362)"></div>
1091
+ </td>
1092
+ <td>
1093
+ <div class="color-cell" style="background-color: lch(38.5472% 60.4765 32.435);"
1094
+ data-bs-toggle="tooltip" data-bs-placement="top"
1095
+ title="lch(38.5472% 60.4765 32.435)"></div>
1096
+ </td>
1097
+ </tr>
1098
+
1099
+ <tr>
1100
+ <td class="fw-bold">tan</td>
1101
+ <td>
1102
+ <div class="color-cell" style="background-color: tan;"
1103
+ data-bs-toggle="tooltip" data-bs-placement="top"
1104
+ title="tan"></div>
1105
+ </td>
1106
+ <td>
1107
+ <div class="color-cell" style="background-color: rgb(210 180 140);"
1108
+ data-bs-toggle="tooltip" data-bs-placement="top"
1109
+ title="rgb(210 180 140)"></div>
1110
+ </td>
1111
+ <td>
1112
+ <div class="color-cell" style="background-color: hwb(34 55% 18%);"
1113
+ data-bs-toggle="tooltip" data-bs-placement="top"
1114
+ title="hwb(34 55% 18%)"></div>
1115
+ </td>
1116
+ <td>
1117
+ <div class="color-cell" style="background-color: hsl(34, 43%, 68%);"
1118
+ data-bs-toggle="tooltip" data-bs-placement="top"
1119
+ title="hsl(34, 43%, 68%)"></div>
1120
+ </td>
1121
+ <td>
1122
+ <div class="color-cell" style="background-color: oklab(0.7799 0.0170 0.0616);"
1123
+ data-bs-toggle="tooltip" data-bs-placement="top"
1124
+ title="oklab(0.7799 0.0170 0.0616)"></div>
1125
+ </td>
1126
+ <td>
1127
+ <div class="color-cell" style="background-color: lab(74.5023% 6.9812 24.7357);"
1128
+ data-bs-toggle="tooltip" data-bs-placement="top"
1129
+ title="lab(74.5023% 6.9812 24.7357)"></div>
1130
+ </td>
1131
+ <td>
1132
+ <div class="color-cell" style="background-color: lch(74.5023% 25.7020 74.239);"
1133
+ data-bs-toggle="tooltip" data-bs-placement="top"
1134
+ title="lch(74.5023% 25.7020 74.239)"></div>
1135
+ </td>
1136
+ </tr>
1137
+
1138
+ <tr>
1139
+ <td class="fw-bold">khaki</td>
1140
+ <td>
1141
+ <div class="color-cell" style="background-color: khaki;"
1142
+ data-bs-toggle="tooltip" data-bs-placement="top"
1143
+ title="khaki"></div>
1144
+ </td>
1145
+ <td>
1146
+ <div class="color-cell" style="background-color: rgb(240 230 140);"
1147
+ data-bs-toggle="tooltip" data-bs-placement="top"
1148
+ title="rgb(240 230 140)"></div>
1149
+ </td>
1150
+ <td>
1151
+ <div class="color-cell" style="background-color: hwb(54 55% 6%);"
1152
+ data-bs-toggle="tooltip" data-bs-placement="top"
1153
+ title="hwb(54 55% 6%)"></div>
1154
+ </td>
1155
+ <td>
1156
+ <div class="color-cell" style="background-color: hsl(54, 77%, 75%);"
1157
+ data-bs-toggle="tooltip" data-bs-placement="top"
1158
+ title="hsl(54, 77%, 75%)"></div>
1159
+ </td>
1160
+ <td>
1161
+ <div class="color-cell" style="background-color: oklab(0.9158 -0.0255 0.1078);"
1162
+ data-bs-toggle="tooltip" data-bs-placement="top"
1163
+ title="oklab(0.9158 -0.0255 0.1078)"></div>
1164
+ </td>
1165
+ <td>
1166
+ <div class="color-cell" style="background-color: lab(90.9199% -5.8890 44.3771);"
1167
+ data-bs-toggle="tooltip" data-bs-placement="top"
1168
+ title="lab(90.9199% -5.8890 44.3771)"></div>
1169
+ </td>
1170
+ <td>
1171
+ <div class="color-cell" style="background-color: lch(90.9199% 44.7662 97.559);"
1172
+ data-bs-toggle="tooltip" data-bs-placement="top"
1173
+ title="lch(90.9199% 44.7662 97.559)"></div>
1174
+ </td>
1175
+ </tr>
1176
+
1177
+ <tr>
1178
+ <td class="fw-bold">salmon</td>
1179
+ <td>
1180
+ <div class="color-cell" style="background-color: salmon;"
1181
+ data-bs-toggle="tooltip" data-bs-placement="top"
1182
+ title="salmon"></div>
1183
+ </td>
1184
+ <td>
1185
+ <div class="color-cell" style="background-color: rgb(250 128 114);"
1186
+ data-bs-toggle="tooltip" data-bs-placement="top"
1187
+ title="rgb(250 128 114)"></div>
1188
+ </td>
1189
+ <td>
1190
+ <div class="color-cell" style="background-color: hwb(6 45% 2%);"
1191
+ data-bs-toggle="tooltip" data-bs-placement="top"
1192
+ title="hwb(6 45% 2%)"></div>
1193
+ </td>
1194
+ <td>
1195
+ <div class="color-cell" style="background-color: hsl(6, 93%, 72%);"
1196
+ data-bs-toggle="tooltip" data-bs-placement="top"
1197
+ title="hsl(6, 93%, 72%)"></div>
1198
+ </td>
1199
+ <td>
1200
+ <div class="color-cell" style="background-color: oklab(0.7386 0.1318 0.0689);"
1201
+ data-bs-toggle="tooltip" data-bs-placement="top"
1202
+ title="oklab(0.7386 0.1318 0.0689)"></div>
1203
+ </td>
1204
+ <td>
1205
+ <div class="color-cell" style="background-color: lab(68.2851% 45.8812 29.0603);"
1206
+ data-bs-toggle="tooltip" data-bs-placement="top"
1207
+ title="lab(68.2851% 45.8812 29.0603)"></div>
1208
+ </td>
1209
+ <td>
1210
+ <div class="color-cell" style="background-color: lch(68.2851% 54.3101 32.349);"
1211
+ data-bs-toggle="tooltip" data-bs-placement="top"
1212
+ title="lch(68.2851% 54.3101 32.349)"></div>
1213
+ </td>
1214
+ </tr>
1215
+
1216
+ <tr>
1217
+ <td class="fw-bold">crimson</td>
1218
+ <td>
1219
+ <div class="color-cell" style="background-color: crimson;"
1220
+ data-bs-toggle="tooltip" data-bs-placement="top"
1221
+ title="crimson"></div>
1222
+ </td>
1223
+ <td>
1224
+ <div class="color-cell" style="background-color: rgb(220 20 60);"
1225
+ data-bs-toggle="tooltip" data-bs-placement="top"
1226
+ title="rgb(220 20 60)"></div>
1227
+ </td>
1228
+ <td>
1229
+ <div class="color-cell" style="background-color: hwb(348 8% 14%);"
1230
+ data-bs-toggle="tooltip" data-bs-placement="top"
1231
+ title="hwb(348 8% 14%)"></div>
1232
+ </td>
1233
+ <td>
1234
+ <div class="color-cell" style="background-color: hsl(348, 83%, 47%);"
1235
+ data-bs-toggle="tooltip" data-bs-placement="top"
1236
+ title="hsl(348, 83%, 47%)"></div>
1237
+ </td>
1238
+ <td>
1239
+ <div class="color-cell" style="background-color: oklab(0.5693 0.2078 0.0756);"
1240
+ data-bs-toggle="tooltip" data-bs-placement="top"
1241
+ title="oklab(0.5693 0.2078 0.0756)"></div>
1242
+ </td>
1243
+ <td>
1244
+ <div class="color-cell" style="background-color: lab(47.6694% 71.0396 35.1709);"
1245
+ data-bs-toggle="tooltip" data-bs-placement="top"
1246
+ title="lab(47.6694% 71.0396 35.1709)"></div>
1247
+ </td>
1248
+ <td>
1249
+ <div class="color-cell" style="background-color: lch(47.6694% 79.2692 26.340);"
1250
+ data-bs-toggle="tooltip" data-bs-placement="top"
1251
+ title="lch(47.6694% 79.2692 26.340)"></div>
1252
+ </td>
1253
+ </tr>
1254
+
1255
+ <tr>
1256
+ <td class="fw-bold">chocolate</td>
1257
+ <td>
1258
+ <div class="color-cell" style="background-color: chocolate;"
1259
+ data-bs-toggle="tooltip" data-bs-placement="top"
1260
+ title="chocolate"></div>
1261
+ </td>
1262
+ <td>
1263
+ <div class="color-cell" style="background-color: rgb(210 105 30);"
1264
+ data-bs-toggle="tooltip" data-bs-placement="top"
1265
+ title="rgb(210 105 30)"></div>
1266
+ </td>
1267
+ <td>
1268
+ <div class="color-cell" style="background-color: hwb(25 12% 18%);"
1269
+ data-bs-toggle="tooltip" data-bs-placement="top"
1270
+ title="hwb(25 12% 18%)"></div>
1271
+ </td>
1272
+ <td>
1273
+ <div class="color-cell" style="background-color: hsl(25, 74%, 47%);"
1274
+ data-bs-toggle="tooltip" data-bs-placement="top"
1275
+ title="hsl(25, 74%, 47%)"></div>
1276
+ </td>
1277
+ <td>
1278
+ <div class="color-cell" style="background-color: oklab(0.6330 0.0981 0.1184);"
1279
+ data-bs-toggle="tooltip" data-bs-placement="top"
1280
+ title="oklab(0.6330 0.0981 0.1184)"></div>
1281
+ </td>
1282
+ <td>
1283
+ <div class="color-cell" style="background-color: lab(56.4808% 38.8651 57.0284);"
1284
+ data-bs-toggle="tooltip" data-bs-placement="top"
1285
+ title="lab(56.4808% 38.8651 57.0284)"></div>
1286
+ </td>
1287
+ <td>
1288
+ <div class="color-cell" style="background-color: lch(56.4808% 69.0126 55.725);"
1289
+ data-bs-toggle="tooltip" data-bs-placement="top"
1290
+ title="lch(56.4808% 69.0126 55.725)"></div>
1291
+ </td>
1292
+ </tr>
1293
+
1294
+ <tr>
1295
+ <td class="fw-bold">peru</td>
1296
+ <td>
1297
+ <div class="color-cell" style="background-color: peru;"
1298
+ data-bs-toggle="tooltip" data-bs-placement="top"
1299
+ title="peru"></div>
1300
+ </td>
1301
+ <td>
1302
+ <div class="color-cell" style="background-color: rgb(205 133 63);"
1303
+ data-bs-toggle="tooltip" data-bs-placement="top"
1304
+ title="rgb(205 133 63)"></div>
1305
+ </td>
1306
+ <td>
1307
+ <div class="color-cell" style="background-color: hwb(30 25% 20%);"
1308
+ data-bs-toggle="tooltip" data-bs-placement="top"
1309
+ title="hwb(30 25% 20%)"></div>
1310
+ </td>
1311
+ <td>
1312
+ <div class="color-cell" style="background-color: hsl(30, 58%, 53%);"
1313
+ data-bs-toggle="tooltip" data-bs-placement="top"
1314
+ title="hsl(30, 58%, 53%)"></div>
1315
+ </td>
1316
+ <td>
1317
+ <div class="color-cell" style="background-color: oklab(0.6822 0.0550 0.1072);"
1318
+ data-bs-toggle="tooltip" data-bs-placement="top"
1319
+ title="oklab(0.6822 0.0550 0.1072)"></div>
1320
+ </td>
1321
+ <td>
1322
+ <div class="color-cell" style="background-color: lab(62.7485% 23.0541 47.5381);"
1323
+ data-bs-toggle="tooltip" data-bs-placement="top"
1324
+ title="lab(62.7485% 23.0541 47.5381)"></div>
1325
+ </td>
1326
+ <td>
1327
+ <div class="color-cell" style="background-color: lch(62.7485% 52.8334 64.128);"
1328
+ data-bs-toggle="tooltip" data-bs-placement="top"
1329
+ title="lch(62.7485% 52.8334 64.128)"></div>
1330
+ </td>
1331
+ </tr>
1332
+
1333
+ <tr>
1334
+ <td class="fw-bold">sienna</td>
1335
+ <td>
1336
+ <div class="color-cell" style="background-color: sienna;"
1337
+ data-bs-toggle="tooltip" data-bs-placement="top"
1338
+ title="sienna"></div>
1339
+ </td>
1340
+ <td>
1341
+ <div class="color-cell" style="background-color: rgb(160 82 45);"
1342
+ data-bs-toggle="tooltip" data-bs-placement="top"
1343
+ title="rgb(160 82 45)"></div>
1344
+ </td>
1345
+ <td>
1346
+ <div class="color-cell" style="background-color: hwb(19 18% 37%);"
1347
+ data-bs-toggle="tooltip" data-bs-placement="top"
1348
+ title="hwb(19 18% 37%)"></div>
1349
+ </td>
1350
+ <td>
1351
+ <div class="color-cell" style="background-color: hsl(19, 56%, 41%);"
1352
+ data-bs-toggle="tooltip" data-bs-placement="top"
1353
+ title="hsl(19, 56%, 41%)"></div>
1354
+ </td>
1355
+ <td>
1356
+ <div class="color-cell" style="background-color: oklab(0.5326 0.0842 0.0816);"
1357
+ data-bs-toggle="tooltip" data-bs-placement="top"
1358
+ title="oklab(0.5326 0.0842 0.0816)"></div>
1359
+ </td>
1360
+ <td>
1361
+ <div class="color-cell" style="background-color: lab(44.9606% 31.6960 36.7038);"
1362
+ data-bs-toggle="tooltip" data-bs-placement="top"
1363
+ title="lab(44.9606% 31.6960 36.7038)"></div>
1364
+ </td>
1365
+ <td>
1366
+ <div class="color-cell" style="background-color: lch(44.9606% 48.4954 49.187);"
1367
+ data-bs-toggle="tooltip" data-bs-placement="top"
1368
+ title="lch(44.9606% 48.4954 49.187)"></div>
1369
+ </td>
1370
+ </tr>
1371
+
1372
+ <tr>
1373
+ <td class="fw-bold">steelblue</td>
1374
+ <td>
1375
+ <div class="color-cell" style="background-color: steelblue;"
1376
+ data-bs-toggle="tooltip" data-bs-placement="top"
1377
+ title="steelblue"></div>
1378
+ </td>
1379
+ <td>
1380
+ <div class="color-cell" style="background-color: rgb(70 130 180);"
1381
+ data-bs-toggle="tooltip" data-bs-placement="top"
1382
+ title="rgb(70 130 180)"></div>
1383
+ </td>
1384
+ <td>
1385
+ <div class="color-cell" style="background-color: hwb(207 27% 29%);"
1386
+ data-bs-toggle="tooltip" data-bs-placement="top"
1387
+ title="hwb(207 27% 29%)"></div>
1388
+ </td>
1389
+ <td>
1390
+ <div class="color-cell" style="background-color: hsl(207, 45%, 49%);"
1391
+ data-bs-toggle="tooltip" data-bs-placement="top"
1392
+ title="hsl(207, 45%, 49%)"></div>
1393
+ </td>
1394
+ <td>
1395
+ <div class="color-cell" style="background-color: oklab(0.5904 -0.0424 -0.0909);"
1396
+ data-bs-toggle="tooltip" data-bs-placement="top"
1397
+ title="oklab(0.5904 -0.0424 -0.0909)"></div>
1398
+ </td>
1399
+ <td>
1400
+ <div class="color-cell" style="background-color: lab(52.2813% -8.8506 -32.9383);"
1401
+ data-bs-toggle="tooltip" data-bs-placement="top"
1402
+ title="lab(52.2813% -8.8506 -32.9383)"></div>
1403
+ </td>
1404
+ <td>
1405
+ <div class="color-cell" style="background-color: lch(52.2813% 34.1067 254.960);"
1406
+ data-bs-toggle="tooltip" data-bs-placement="top"
1407
+ title="lch(52.2813% 34.1067 254.960)"></div>
1408
+ </td>
1409
+ </tr>
1410
+
1411
+ <tr>
1412
+ <td class="fw-bold">skyblue</td>
1413
+ <td>
1414
+ <div class="color-cell" style="background-color: skyblue;"
1415
+ data-bs-toggle="tooltip" data-bs-placement="top"
1416
+ title="skyblue"></div>
1417
+ </td>
1418
+ <td>
1419
+ <div class="color-cell" style="background-color: rgb(135 206 235);"
1420
+ data-bs-toggle="tooltip" data-bs-placement="top"
1421
+ title="rgb(135 206 235)"></div>
1422
+ </td>
1423
+ <td>
1424
+ <div class="color-cell" style="background-color: hwb(197 53% 8%);"
1425
+ data-bs-toggle="tooltip" data-bs-placement="top"
1426
+ title="hwb(197 53% 8%)"></div>
1427
+ </td>
1428
+ <td>
1429
+ <div class="color-cell" style="background-color: hsl(197, 71%, 73%);"
1430
+ data-bs-toggle="tooltip" data-bs-placement="top"
1431
+ title="hsl(197, 71%, 73%)"></div>
1432
+ </td>
1433
+ <td>
1434
+ <div class="color-cell" style="background-color: oklab(0.8180 -0.0567 -0.0571);"
1435
+ data-bs-toggle="tooltip" data-bs-placement="top"
1436
+ title="oklab(0.8180 -0.0567 -0.0571)"></div>
1437
+ </td>
1438
+ <td>
1439
+ <div class="color-cell" style="background-color: lab(79.2281% -17.4735 -21.2037);"
1440
+ data-bs-toggle="tooltip" data-bs-placement="top"
1441
+ title="lab(79.2281% -17.4735 -21.2037)"></div>
1442
+ </td>
1443
+ <td>
1444
+ <div class="color-cell" style="background-color: lch(79.2281% 27.4758 230.509);"
1445
+ data-bs-toggle="tooltip" data-bs-placement="top"
1446
+ title="lch(79.2281% 27.4758 230.509)"></div>
1447
+ </td>
1448
+ </tr>
1449
+
1450
+ <tr>
1451
+ <td class="fw-bold">turquoise</td>
1452
+ <td>
1453
+ <div class="color-cell" style="background-color: turquoise;"
1454
+ data-bs-toggle="tooltip" data-bs-placement="top"
1455
+ title="turquoise"></div>
1456
+ </td>
1457
+ <td>
1458
+ <div class="color-cell" style="background-color: rgb(64 224 208);"
1459
+ data-bs-toggle="tooltip" data-bs-placement="top"
1460
+ title="rgb(64 224 208)"></div>
1461
+ </td>
1462
+ <td>
1463
+ <div class="color-cell" style="background-color: hwb(174 25% 12%);"
1464
+ data-bs-toggle="tooltip" data-bs-placement="top"
1465
+ title="hwb(174 25% 12%)"></div>
1466
+ </td>
1467
+ <td>
1468
+ <div class="color-cell" style="background-color: hsl(174, 72%, 56%);"
1469
+ data-bs-toggle="tooltip" data-bs-placement="top"
1470
+ title="hsl(174, 72%, 56%)"></div>
1471
+ </td>
1472
+ <td>
1473
+ <div class="color-cell" style="background-color: oklab(0.8216 -0.1314 -0.0104);"
1474
+ data-bs-toggle="tooltip" data-bs-placement="top"
1475
+ title="oklab(0.8216 -0.1314 -0.0104)"></div>
1476
+ </td>
1477
+ <td>
1478
+ <div class="color-cell" style="background-color: lab(80.8967% -45.5928 -4.2208);"
1479
+ data-bs-toggle="tooltip" data-bs-placement="top"
1480
+ title="lab(80.8967% -45.5928 -4.2208)"></div>
1481
+ </td>
1482
+ <td>
1483
+ <div class="color-cell" style="background-color: lch(80.8967% 45.7878 185.289);"
1484
+ data-bs-toggle="tooltip" data-bs-placement="top"
1485
+ title="lch(80.8967% 45.7878 185.289)"></div>
1486
+ </td>
1487
+ </tr>
1488
+
1489
+ <tr>
1490
+ <td class="fw-bold">orchid</td>
1491
+ <td>
1492
+ <div class="color-cell" style="background-color: orchid;"
1493
+ data-bs-toggle="tooltip" data-bs-placement="top"
1494
+ title="orchid"></div>
1495
+ </td>
1496
+ <td>
1497
+ <div class="color-cell" style="background-color: rgb(218 112 214);"
1498
+ data-bs-toggle="tooltip" data-bs-placement="top"
1499
+ title="rgb(218 112 214)"></div>
1500
+ </td>
1501
+ <td>
1502
+ <div class="color-cell" style="background-color: hwb(302 44% 15%);"
1503
+ data-bs-toggle="tooltip" data-bs-placement="top"
1504
+ title="hwb(302 44% 15%)"></div>
1505
+ </td>
1506
+ <td>
1507
+ <div class="color-cell" style="background-color: hsl(302, 58%, 65%);"
1508
+ data-bs-toggle="tooltip" data-bs-placement="top"
1509
+ title="hsl(302, 58%, 65%)"></div>
1510
+ </td>
1511
+ <td>
1512
+ <div class="color-cell" style="background-color: oklab(0.7049 0.1521 -0.0925);"
1513
+ data-bs-toggle="tooltip" data-bs-placement="top"
1514
+ title="oklab(0.7049 0.1521 -0.0925)"></div>
1515
+ </td>
1516
+ <td>
1517
+ <div class="color-cell" style="background-color: lab(63.1287% 51.5246 -33.5006);"
1518
+ data-bs-toggle="tooltip" data-bs-placement="top"
1519
+ title="lab(63.1287% 51.5246 -33.5006)"></div>
1520
+ </td>
1521
+ <td>
1522
+ <div class="color-cell" style="background-color: lch(63.1287% 61.4579 326.969);"
1523
+ data-bs-toggle="tooltip" data-bs-placement="top"
1524
+ title="lch(63.1287% 61.4579 326.969)"></div>
1525
+ </td>
1526
+ </tr>
1527
+
1528
+ <tr>
1529
+ <td class="fw-bold">plum</td>
1530
+ <td>
1531
+ <div class="color-cell" style="background-color: plum;"
1532
+ data-bs-toggle="tooltip" data-bs-placement="top"
1533
+ title="plum"></div>
1534
+ </td>
1535
+ <td>
1536
+ <div class="color-cell" style="background-color: rgb(221 160 221);"
1537
+ data-bs-toggle="tooltip" data-bs-placement="top"
1538
+ title="rgb(221 160 221)"></div>
1539
+ </td>
1540
+ <td>
1541
+ <div class="color-cell" style="background-color: hwb(300 63% 13%);"
1542
+ data-bs-toggle="tooltip" data-bs-placement="top"
1543
+ title="hwb(300 63% 13%)"></div>
1544
+ </td>
1545
+ <td>
1546
+ <div class="color-cell" style="background-color: hsl(300, 48%, 75%);"
1547
+ data-bs-toggle="tooltip" data-bs-placement="top"
1548
+ title="hsl(300, 48%, 75%)"></div>
1549
+ </td>
1550
+ <td>
1551
+ <div class="color-cell" style="background-color: oklab(0.7864 0.0898 -0.0594);"
1552
+ data-bs-toggle="tooltip" data-bs-placement="top"
1553
+ title="oklab(0.7864 0.0898 -0.0594)"></div>
1554
+ </td>
1555
+ <td>
1556
+ <div class="color-cell" style="background-color: lab(73.6958% 30.6227 -21.7733);"
1557
+ data-bs-toggle="tooltip" data-bs-placement="top"
1558
+ title="lab(73.6958% 30.6227 -21.7733)"></div>
1559
+ </td>
1560
+ <td>
1561
+ <div class="color-cell" style="background-color: lch(73.6958% 37.5743 324.586);"
1562
+ data-bs-toggle="tooltip" data-bs-placement="top"
1563
+ title="lch(73.6958% 37.5743 324.586)"></div>
1564
+ </td>
1565
+ </tr>
1566
+
1567
+ <tr>
1568
+ <td class="fw-bold">lavender</td>
1569
+ <td>
1570
+ <div class="color-cell" style="background-color: lavender;"
1571
+ data-bs-toggle="tooltip" data-bs-placement="top"
1572
+ title="lavender"></div>
1573
+ </td>
1574
+ <td>
1575
+ <div class="color-cell" style="background-color: rgb(230 230 250);"
1576
+ data-bs-toggle="tooltip" data-bs-placement="top"
1577
+ title="rgb(230 230 250)"></div>
1578
+ </td>
1579
+ <td>
1580
+ <div class="color-cell" style="background-color: hwb(240 90% 2%);"
1581
+ data-bs-toggle="tooltip" data-bs-placement="top"
1582
+ title="hwb(240 90% 2%)"></div>
1583
+ </td>
1584
+ <td>
1585
+ <div class="color-cell" style="background-color: hsl(240, 67%, 94%);"
1586
+ data-bs-toggle="tooltip" data-bs-placement="top"
1587
+ title="hsl(240, 67%, 94%)"></div>
1588
+ </td>
1589
+ <td>
1590
+ <div class="color-cell" style="background-color: oklab(0.9282 0.0077 -0.0272);"
1591
+ data-bs-toggle="tooltip" data-bs-placement="top"
1592
+ title="oklab(0.9282 0.0077 -0.0272)"></div>
1593
+ </td>
1594
+ <td>
1595
+ <div class="color-cell" style="background-color: lab(91.4165% 2.9279 -10.1784);"
1596
+ data-bs-toggle="tooltip" data-bs-placement="top"
1597
+ title="lab(91.4165% 2.9279 -10.1784)"></div>
1598
+ </td>
1599
+ <td>
1600
+ <div class="color-cell" style="background-color: lch(91.4165% 10.5911 286.048);"
1601
+ data-bs-toggle="tooltip" data-bs-placement="top"
1602
+ title="lch(91.4165% 10.5911 286.048)"></div>
1603
+ </td>
1604
+ </tr>
1605
+
1606
+ </tbody>
1607
+ </table>
1608
+ </div>
1609
+ </div>
1610
+
1611
+ <!-- Reverse conversion tab -->
1612
+ <div class="tab-pane fade" id="reverse" role="tabpanel" aria-labelledby="reverse-tab">
1613
+ <p class="text-muted mb-3">Starting from LCH, converting back through each format. Some precision loss expected but should be visually close.</p>
1614
+
1615
+ <div class="table-responsive">
1616
+ <table class="table table-striped table-hover">
1617
+ <thead class="table-light">
1618
+ <tr>
1619
+ <th>Original</th>
1620
+ <th>LCH</th>
1621
+ <th>Lab</th>
1622
+ <th>Oklab</th>
1623
+ <th>HSL</th>
1624
+ <th>HWB</th>
1625
+ <th>RGB</th>
1626
+ <th>Hex</th>
1627
+ <th>Match</th>
1628
+ </tr>
1629
+ </thead>
1630
+ <tbody>
1631
+
1632
+ <tr>
1633
+ <td>
1634
+ <div class="color-cell" style="background-color: #ff0000;"
1635
+ data-bs-toggle="tooltip" data-bs-placement="top"
1636
+ title="#ff0000"></div>
1637
+ <div class="small fw-bold mt-1">red</div>
1638
+ </td>
1639
+ <td>
1640
+ <div class="color-cell" style="background-color: lch(54.2943% 106.8519 40.855);"
1641
+ data-bs-toggle="tooltip" data-bs-placement="top"
1642
+ title="lch(54.2943% 106.8519 40.855)"></div>
1643
+ </td>
1644
+ <td>
1645
+ <div class="color-cell" style="background-color: lab(54.2943% 80.8193 69.8969);"
1646
+ data-bs-toggle="tooltip" data-bs-placement="top"
1647
+ title="lab(54.2943% 80.8193 69.8969)"></div>
1648
+ </td>
1649
+ <td>
1650
+ <div class="color-cell" style="background-color: oklab(0.6280 0.2249 0.1258);"
1651
+ data-bs-toggle="tooltip" data-bs-placement="top"
1652
+ title="oklab(0.6280 0.2249 0.1258)"></div>
1653
+ </td>
1654
+ <td>
1655
+ <div class="color-cell" style="background-color: hsl(0, 100%, 50%);"
1656
+ data-bs-toggle="tooltip" data-bs-placement="top"
1657
+ title="hsl(0, 100%, 50%)"></div>
1658
+ </td>
1659
+ <td>
1660
+ <div class="color-cell" style="background-color: hwb(0 0% 0%);"
1661
+ data-bs-toggle="tooltip" data-bs-placement="top"
1662
+ title="hwb(0 0% 0%)"></div>
1663
+ </td>
1664
+ <td>
1665
+ <div class="color-cell" style="background-color: rgb(255 0 0);"
1666
+ data-bs-toggle="tooltip" data-bs-placement="top"
1667
+ title="rgb(255 0 0)"></div>
1668
+ </td>
1669
+ <td>
1670
+ <div class="color-cell" style="background-color: #ff0000;"
1671
+ data-bs-toggle="tooltip" data-bs-placement="top"
1672
+ title="#ff0000"></div>
1673
+ </td>
1674
+ <td class="match-indicator perfect"
1675
+ data-bs-toggle="tooltip" data-bs-placement="top"
1676
+ title="RGB distance: 0.00">
1677
+
1678
+ </td>
1679
+ </tr>
1680
+
1681
+ <tr>
1682
+ <td>
1683
+ <div class="color-cell" style="background-color: #008000;"
1684
+ data-bs-toggle="tooltip" data-bs-placement="top"
1685
+ title="#008000"></div>
1686
+ <div class="small fw-bold mt-1">green</div>
1687
+ </td>
1688
+ <td>
1689
+ <div class="color-cell" style="background-color: lch(46.2772% 67.9815 134.379);"
1690
+ data-bs-toggle="tooltip" data-bs-placement="top"
1691
+ title="lch(46.2772% 67.9815 134.379)"></div>
1692
+ </td>
1693
+ <td>
1694
+ <div class="color-cell" style="background-color: lab(46.2772% -47.5464 48.5884);"
1695
+ data-bs-toggle="tooltip" data-bs-placement="top"
1696
+ title="lab(46.2772% -47.5464 48.5884)"></div>
1697
+ </td>
1698
+ <td>
1699
+ <div class="color-cell" style="background-color: oklab(0.5198 -0.1403 0.1077);"
1700
+ data-bs-toggle="tooltip" data-bs-placement="top"
1701
+ title="oklab(0.5198 -0.1403 0.1077)"></div>
1702
+ </td>
1703
+ <td>
1704
+ <div class="color-cell" style="background-color: hsl(120, 100%, 25%);"
1705
+ data-bs-toggle="tooltip" data-bs-placement="top"
1706
+ title="hsl(120, 100%, 25%)"></div>
1707
+ </td>
1708
+ <td>
1709
+ <div class="color-cell" style="background-color: hwb(120 0% 50%);"
1710
+ data-bs-toggle="tooltip" data-bs-placement="top"
1711
+ title="hwb(120 0% 50%)"></div>
1712
+ </td>
1713
+ <td>
1714
+ <div class="color-cell" style="background-color: rgb(0 128 0);"
1715
+ data-bs-toggle="tooltip" data-bs-placement="top"
1716
+ title="rgb(0 128 0)"></div>
1717
+ </td>
1718
+ <td>
1719
+ <div class="color-cell" style="background-color: #008000;"
1720
+ data-bs-toggle="tooltip" data-bs-placement="top"
1721
+ title="#008000"></div>
1722
+ </td>
1723
+ <td class="match-indicator perfect"
1724
+ data-bs-toggle="tooltip" data-bs-placement="top"
1725
+ title="RGB distance: 0.00">
1726
+
1727
+ </td>
1728
+ </tr>
1729
+
1730
+ <tr>
1731
+ <td>
1732
+ <div class="color-cell" style="background-color: #0000ff;"
1733
+ data-bs-toggle="tooltip" data-bs-placement="top"
1734
+ title="#0000ff"></div>
1735
+ <div class="small fw-bold mt-1">blue</div>
1736
+ </td>
1737
+ <td>
1738
+ <div class="color-cell" style="background-color: lch(29.5647% 131.1877 301.369);"
1739
+ data-bs-toggle="tooltip" data-bs-placement="top"
1740
+ title="lch(29.5647% 131.1877 301.369)"></div>
1741
+ </td>
1742
+ <td>
1743
+ <div class="color-cell" style="background-color: lab(29.5647% 68.2896 -112.0124);"
1744
+ data-bs-toggle="tooltip" data-bs-placement="top"
1745
+ title="lab(29.5647% 68.2896 -112.0124)"></div>
1746
+ </td>
1747
+ <td>
1748
+ <div class="color-cell" style="background-color: oklab(0.4520 -0.0325 -0.3115);"
1749
+ data-bs-toggle="tooltip" data-bs-placement="top"
1750
+ title="oklab(0.4520 -0.0325 -0.3115)"></div>
1751
+ </td>
1752
+ <td>
1753
+ <div class="color-cell" style="background-color: hsl(240, 100%, 50%);"
1754
+ data-bs-toggle="tooltip" data-bs-placement="top"
1755
+ title="hsl(240, 100%, 50%)"></div>
1756
+ </td>
1757
+ <td>
1758
+ <div class="color-cell" style="background-color: hwb(240 0% 0%);"
1759
+ data-bs-toggle="tooltip" data-bs-placement="top"
1760
+ title="hwb(240 0% 0%)"></div>
1761
+ </td>
1762
+ <td>
1763
+ <div class="color-cell" style="background-color: rgb(0 0 255);"
1764
+ data-bs-toggle="tooltip" data-bs-placement="top"
1765
+ title="rgb(0 0 255)"></div>
1766
+ </td>
1767
+ <td>
1768
+ <div class="color-cell" style="background-color: #0000ff;"
1769
+ data-bs-toggle="tooltip" data-bs-placement="top"
1770
+ title="#0000ff"></div>
1771
+ </td>
1772
+ <td class="match-indicator perfect"
1773
+ data-bs-toggle="tooltip" data-bs-placement="top"
1774
+ title="RGB distance: 0.00">
1775
+
1776
+ </td>
1777
+ </tr>
1778
+
1779
+ <tr>
1780
+ <td>
1781
+ <div class="color-cell" style="background-color: #ffff00;"
1782
+ data-bs-toggle="tooltip" data-bs-placement="top"
1783
+ title="#ffff00"></div>
1784
+ <div class="small fw-bold mt-1">yellow</div>
1785
+ </td>
1786
+ <td>
1787
+ <div class="color-cell" style="background-color: lch(97.6078% 94.7145 99.559);"
1788
+ data-bs-toggle="tooltip" data-bs-placement="top"
1789
+ title="lch(97.6078% 94.7145 99.559)"></div>
1790
+ </td>
1791
+ <td>
1792
+ <div class="color-cell" style="background-color: lab(97.6078% -15.7286 93.3995);"
1793
+ data-bs-toggle="tooltip" data-bs-placement="top"
1794
+ title="lab(97.6078% -15.7286 93.3995)"></div>
1795
+ </td>
1796
+ <td>
1797
+ <div class="color-cell" style="background-color: oklab(0.9680 -0.0714 0.1986);"
1798
+ data-bs-toggle="tooltip" data-bs-placement="top"
1799
+ title="oklab(0.9680 -0.0714 0.1986)"></div>
1800
+ </td>
1801
+ <td>
1802
+ <div class="color-cell" style="background-color: hsl(60, 100%, 50%);"
1803
+ data-bs-toggle="tooltip" data-bs-placement="top"
1804
+ title="hsl(60, 100%, 50%)"></div>
1805
+ </td>
1806
+ <td>
1807
+ <div class="color-cell" style="background-color: hwb(60 0% 0%);"
1808
+ data-bs-toggle="tooltip" data-bs-placement="top"
1809
+ title="hwb(60 0% 0%)"></div>
1810
+ </td>
1811
+ <td>
1812
+ <div class="color-cell" style="background-color: rgb(255 255 0);"
1813
+ data-bs-toggle="tooltip" data-bs-placement="top"
1814
+ title="rgb(255 255 0)"></div>
1815
+ </td>
1816
+ <td>
1817
+ <div class="color-cell" style="background-color: #ffff00;"
1818
+ data-bs-toggle="tooltip" data-bs-placement="top"
1819
+ title="#ffff00"></div>
1820
+ </td>
1821
+ <td class="match-indicator perfect"
1822
+ data-bs-toggle="tooltip" data-bs-placement="top"
1823
+ title="RGB distance: 0.00">
1824
+
1825
+ </td>
1826
+ </tr>
1827
+
1828
+ <tr>
1829
+ <td>
1830
+ <div class="color-cell" style="background-color: #00ffff;"
1831
+ data-bs-toggle="tooltip" data-bs-placement="top"
1832
+ title="#00ffff"></div>
1833
+ <div class="small fw-bold mt-1">cyan</div>
1834
+ </td>
1835
+ <td>
1836
+ <div class="color-cell" style="background-color: lch(90.6646% 52.8087 196.436);"
1837
+ data-bs-toggle="tooltip" data-bs-placement="top"
1838
+ title="lch(90.6646% 52.8087 196.436)"></div>
1839
+ </td>
1840
+ <td>
1841
+ <div class="color-cell" style="background-color: lab(90.6646% -50.6507 -14.9419);"
1842
+ data-bs-toggle="tooltip" data-bs-placement="top"
1843
+ title="lab(90.6646% -50.6507 -14.9419)"></div>
1844
+ </td>
1845
+ <td>
1846
+ <div class="color-cell" style="background-color: oklab(0.9054 -0.1494 -0.0394);"
1847
+ data-bs-toggle="tooltip" data-bs-placement="top"
1848
+ title="oklab(0.9054 -0.1494 -0.0394)"></div>
1849
+ </td>
1850
+ <td>
1851
+ <div class="color-cell" style="background-color: hsl(180, 100%, 50%);"
1852
+ data-bs-toggle="tooltip" data-bs-placement="top"
1853
+ title="hsl(180, 100%, 50%)"></div>
1854
+ </td>
1855
+ <td>
1856
+ <div class="color-cell" style="background-color: hwb(180 0% 0%);"
1857
+ data-bs-toggle="tooltip" data-bs-placement="top"
1858
+ title="hwb(180 0% 0%)"></div>
1859
+ </td>
1860
+ <td>
1861
+ <div class="color-cell" style="background-color: rgb(0 255 255);"
1862
+ data-bs-toggle="tooltip" data-bs-placement="top"
1863
+ title="rgb(0 255 255)"></div>
1864
+ </td>
1865
+ <td>
1866
+ <div class="color-cell" style="background-color: #00ffff;"
1867
+ data-bs-toggle="tooltip" data-bs-placement="top"
1868
+ title="#00ffff"></div>
1869
+ </td>
1870
+ <td class="match-indicator perfect"
1871
+ data-bs-toggle="tooltip" data-bs-placement="top"
1872
+ title="RGB distance: 0.00">
1873
+
1874
+ </td>
1875
+ </tr>
1876
+
1877
+ <tr>
1878
+ <td>
1879
+ <div class="color-cell" style="background-color: #ff00ff;"
1880
+ data-bs-toggle="tooltip" data-bs-placement="top"
1881
+ title="#ff00ff"></div>
1882
+ <div class="small fw-bold mt-1">magenta</div>
1883
+ </td>
1884
+ <td>
1885
+ <div class="color-cell" style="background-color: lch(60.1708% 111.3956 327.120);"
1886
+ data-bs-toggle="tooltip" data-bs-placement="top"
1887
+ title="lch(60.1708% 111.3956 327.120)"></div>
1888
+ </td>
1889
+ <td>
1890
+ <div class="color-cell" style="background-color: lab(60.1708% 93.5511 -60.4746);"
1891
+ data-bs-toggle="tooltip" data-bs-placement="top"
1892
+ title="lab(60.1708% 93.5511 -60.4746)"></div>
1893
+ </td>
1894
+ <td>
1895
+ <div class="color-cell" style="background-color: oklab(0.7017 0.2746 -0.1692);"
1896
+ data-bs-toggle="tooltip" data-bs-placement="top"
1897
+ title="oklab(0.7017 0.2746 -0.1692)"></div>
1898
+ </td>
1899
+ <td>
1900
+ <div class="color-cell" style="background-color: hsl(300, 100%, 50%);"
1901
+ data-bs-toggle="tooltip" data-bs-placement="top"
1902
+ title="hsl(300, 100%, 50%)"></div>
1903
+ </td>
1904
+ <td>
1905
+ <div class="color-cell" style="background-color: hwb(300 0% 0%);"
1906
+ data-bs-toggle="tooltip" data-bs-placement="top"
1907
+ title="hwb(300 0% 0%)"></div>
1908
+ </td>
1909
+ <td>
1910
+ <div class="color-cell" style="background-color: rgb(255 0 255);"
1911
+ data-bs-toggle="tooltip" data-bs-placement="top"
1912
+ title="rgb(255 0 255)"></div>
1913
+ </td>
1914
+ <td>
1915
+ <div class="color-cell" style="background-color: #ff00ff;"
1916
+ data-bs-toggle="tooltip" data-bs-placement="top"
1917
+ title="#ff00ff"></div>
1918
+ </td>
1919
+ <td class="match-indicator perfect"
1920
+ data-bs-toggle="tooltip" data-bs-placement="top"
1921
+ title="RGB distance: 0.00">
1922
+
1923
+ </td>
1924
+ </tr>
1925
+
1926
+ <tr>
1927
+ <td>
1928
+ <div class="color-cell" style="background-color: #ffffff;"
1929
+ data-bs-toggle="tooltip" data-bs-placement="top"
1930
+ title="#ffffff"></div>
1931
+ <div class="small fw-bold mt-1">white</div>
1932
+ </td>
1933
+ <td>
1934
+ <div class="color-cell" style="background-color: lch(100.0002% 0.0282 53.346);"
1935
+ data-bs-toggle="tooltip" data-bs-placement="top"
1936
+ title="lch(100.0002% 0.0282 53.346)"></div>
1937
+ </td>
1938
+ <td>
1939
+ <div class="color-cell" style="background-color: lab(100.0000% 0.0168 0.0226);"
1940
+ data-bs-toggle="tooltip" data-bs-placement="top"
1941
+ title="lab(100.0000% 0.0168 0.0226)"></div>
1942
+ </td>
1943
+ <td>
1944
+ <div class="color-cell" style="background-color: oklab(1.0000 -0.0000 -0.0000);"
1945
+ data-bs-toggle="tooltip" data-bs-placement="top"
1946
+ title="oklab(1.0000 -0.0000 -0.0000)"></div>
1947
+ </td>
1948
+ <td>
1949
+ <div class="color-cell" style="background-color: hsl(0, 0%, 100%);"
1950
+ data-bs-toggle="tooltip" data-bs-placement="top"
1951
+ title="hsl(0, 0%, 100%)"></div>
1952
+ </td>
1953
+ <td>
1954
+ <div class="color-cell" style="background-color: hwb(0 100% 0%);"
1955
+ data-bs-toggle="tooltip" data-bs-placement="top"
1956
+ title="hwb(0 100% 0%)"></div>
1957
+ </td>
1958
+ <td>
1959
+ <div class="color-cell" style="background-color: rgb(255 255 255);"
1960
+ data-bs-toggle="tooltip" data-bs-placement="top"
1961
+ title="rgb(255 255 255)"></div>
1962
+ </td>
1963
+ <td>
1964
+ <div class="color-cell" style="background-color: #ffffff;"
1965
+ data-bs-toggle="tooltip" data-bs-placement="top"
1966
+ title="#ffffff"></div>
1967
+ </td>
1968
+ <td class="match-indicator perfect"
1969
+ data-bs-toggle="tooltip" data-bs-placement="top"
1970
+ title="RGB distance: 0.00">
1971
+
1972
+ </td>
1973
+ </tr>
1974
+
1975
+ <tr>
1976
+ <td>
1977
+ <div class="color-cell" style="background-color: #000000;"
1978
+ data-bs-toggle="tooltip" data-bs-placement="top"
1979
+ title="#000000"></div>
1980
+ <div class="small fw-bold mt-1">black</div>
1981
+ </td>
1982
+ <td>
1983
+ <div class="color-cell" style="background-color: lch(-0.0000% 0.0000 0.000);"
1984
+ data-bs-toggle="tooltip" data-bs-placement="top"
1985
+ title="lch(-0.0000% 0.0000 0.000)"></div>
1986
+ </td>
1987
+ <td>
1988
+ <div class="color-cell" style="background-color: lab(-0.0000% 0.0000 0.0000);"
1989
+ data-bs-toggle="tooltip" data-bs-placement="top"
1990
+ title="lab(-0.0000% 0.0000 0.0000)"></div>
1991
+ </td>
1992
+ <td>
1993
+ <div class="color-cell" style="background-color: oklab(-0.0000 -0.0000 0.0000);"
1994
+ data-bs-toggle="tooltip" data-bs-placement="top"
1995
+ title="oklab(-0.0000 -0.0000 0.0000)"></div>
1996
+ </td>
1997
+ <td>
1998
+ <div class="color-cell" style="background-color: hsl(0, 0%, 0%);"
1999
+ data-bs-toggle="tooltip" data-bs-placement="top"
2000
+ title="hsl(0, 0%, 0%)"></div>
2001
+ </td>
2002
+ <td>
2003
+ <div class="color-cell" style="background-color: hwb(0 0% 100%);"
2004
+ data-bs-toggle="tooltip" data-bs-placement="top"
2005
+ title="hwb(0 0% 100%)"></div>
2006
+ </td>
2007
+ <td>
2008
+ <div class="color-cell" style="background-color: rgb(0 0 0);"
2009
+ data-bs-toggle="tooltip" data-bs-placement="top"
2010
+ title="rgb(0 0 0)"></div>
2011
+ </td>
2012
+ <td>
2013
+ <div class="color-cell" style="background-color: #000000;"
2014
+ data-bs-toggle="tooltip" data-bs-placement="top"
2015
+ title="#000000"></div>
2016
+ </td>
2017
+ <td class="match-indicator perfect"
2018
+ data-bs-toggle="tooltip" data-bs-placement="top"
2019
+ title="RGB distance: 0.00">
2020
+
2021
+ </td>
2022
+ </tr>
2023
+
2024
+ <tr>
2025
+ <td>
2026
+ <div class="color-cell" style="background-color: #808080;"
2027
+ data-bs-toggle="tooltip" data-bs-placement="top"
2028
+ title="#808080"></div>
2029
+ <div class="small fw-bold mt-1">gray</div>
2030
+ </td>
2031
+ <td>
2032
+ <div class="color-cell" style="background-color: lch(53.5851% 0.0169 53.346);"
2033
+ data-bs-toggle="tooltip" data-bs-placement="top"
2034
+ title="lch(53.5851% 0.0169 53.346)"></div>
2035
+ </td>
2036
+ <td>
2037
+ <div class="color-cell" style="background-color: lab(53.5851% 0.0101 0.0136);"
2038
+ data-bs-toggle="tooltip" data-bs-placement="top"
2039
+ title="lab(53.5851% 0.0101 0.0136)"></div>
2040
+ </td>
2041
+ <td>
2042
+ <div class="color-cell" style="background-color: oklab(0.5999 -0.0000 0.0000);"
2043
+ data-bs-toggle="tooltip" data-bs-placement="top"
2044
+ title="oklab(0.5999 -0.0000 0.0000)"></div>
2045
+ </td>
2046
+ <td>
2047
+ <div class="color-cell" style="background-color: hsl(0, 0%, 50%);"
2048
+ data-bs-toggle="tooltip" data-bs-placement="top"
2049
+ title="hsl(0, 0%, 50%)"></div>
2050
+ </td>
2051
+ <td>
2052
+ <div class="color-cell" style="background-color: hwb(0 50% 50%);"
2053
+ data-bs-toggle="tooltip" data-bs-placement="top"
2054
+ title="hwb(0 50% 50%)"></div>
2055
+ </td>
2056
+ <td>
2057
+ <div class="color-cell" style="background-color: rgb(128 128 128);"
2058
+ data-bs-toggle="tooltip" data-bs-placement="top"
2059
+ title="rgb(128 128 128)"></div>
2060
+ </td>
2061
+ <td>
2062
+ <div class="color-cell" style="background-color: #808080;"
2063
+ data-bs-toggle="tooltip" data-bs-placement="top"
2064
+ title="#808080"></div>
2065
+ </td>
2066
+ <td class="match-indicator perfect"
2067
+ data-bs-toggle="tooltip" data-bs-placement="top"
2068
+ title="RGB distance: 0.00">
2069
+
2070
+ </td>
2071
+ </tr>
2072
+
2073
+ <tr>
2074
+ <td>
2075
+ <div class="color-cell" style="background-color: #c0c0c0;"
2076
+ data-bs-toggle="tooltip" data-bs-placement="top"
2077
+ title="#c0c0c0"></div>
2078
+ <div class="small fw-bold mt-1">silver</div>
2079
+ </td>
2080
+ <td>
2081
+ <div class="color-cell" style="background-color: lch(77.7045% 0.0228 53.346);"
2082
+ data-bs-toggle="tooltip" data-bs-placement="top"
2083
+ title="lch(77.7045% 0.0228 53.346)"></div>
2084
+ </td>
2085
+ <td>
2086
+ <div class="color-cell" style="background-color: lab(77.7045% 0.0136 0.0183);"
2087
+ data-bs-toggle="tooltip" data-bs-placement="top"
2088
+ title="lab(77.7045% 0.0136 0.0183)"></div>
2089
+ </td>
2090
+ <td>
2091
+ <div class="color-cell" style="background-color: oklab(0.8078 -0.0000 0.0000);"
2092
+ data-bs-toggle="tooltip" data-bs-placement="top"
2093
+ title="oklab(0.8078 -0.0000 0.0000)"></div>
2094
+ </td>
2095
+ <td>
2096
+ <div class="color-cell" style="background-color: hsl(0, 0%, 75%);"
2097
+ data-bs-toggle="tooltip" data-bs-placement="top"
2098
+ title="hsl(0, 0%, 75%)"></div>
2099
+ </td>
2100
+ <td>
2101
+ <div class="color-cell" style="background-color: hwb(0 75% 25%);"
2102
+ data-bs-toggle="tooltip" data-bs-placement="top"
2103
+ title="hwb(0 75% 25%)"></div>
2104
+ </td>
2105
+ <td>
2106
+ <div class="color-cell" style="background-color: rgb(191 191 191);"
2107
+ data-bs-toggle="tooltip" data-bs-placement="top"
2108
+ title="rgb(191 191 191)"></div>
2109
+ </td>
2110
+ <td>
2111
+ <div class="color-cell" style="background-color: #bfbfbf;"
2112
+ data-bs-toggle="tooltip" data-bs-placement="top"
2113
+ title="#bfbfbf"></div>
2114
+ </td>
2115
+ <td class="match-indicator close"
2116
+ data-bs-toggle="tooltip" data-bs-placement="top"
2117
+ title="RGB distance: 1.73">
2118
+
2119
+ </td>
2120
+ </tr>
2121
+
2122
+ <tr>
2123
+ <td>
2124
+ <div class="color-cell" style="background-color: #800000;"
2125
+ data-bs-toggle="tooltip" data-bs-placement="top"
2126
+ title="#800000"></div>
2127
+ <div class="small fw-bold mt-1">maroon</div>
2128
+ </td>
2129
+ <td>
2130
+ <div class="color-cell" style="background-color: lch(26.1675% 62.4993 39.131);"
2131
+ data-bs-toggle="tooltip" data-bs-placement="top"
2132
+ title="lch(26.1675% 62.4993 39.131)"></div>
2133
+ </td>
2134
+ <td>
2135
+ <div class="color-cell" style="background-color: lab(26.1675% 48.4810 39.4431);"
2136
+ data-bs-toggle="tooltip" data-bs-placement="top"
2137
+ title="lab(26.1675% 48.4810 39.4431)"></div>
2138
+ </td>
2139
+ <td>
2140
+ <div class="color-cell" style="background-color: oklab(0.3767 0.1349 0.0755);"
2141
+ data-bs-toggle="tooltip" data-bs-placement="top"
2142
+ title="oklab(0.3767 0.1349 0.0755)"></div>
2143
+ </td>
2144
+ <td>
2145
+ <div class="color-cell" style="background-color: hsl(0, 100%, 25%);"
2146
+ data-bs-toggle="tooltip" data-bs-placement="top"
2147
+ title="hsl(0, 100%, 25%)"></div>
2148
+ </td>
2149
+ <td>
2150
+ <div class="color-cell" style="background-color: hwb(0 0% 50%);"
2151
+ data-bs-toggle="tooltip" data-bs-placement="top"
2152
+ title="hwb(0 0% 50%)"></div>
2153
+ </td>
2154
+ <td>
2155
+ <div class="color-cell" style="background-color: rgb(128 0 0);"
2156
+ data-bs-toggle="tooltip" data-bs-placement="top"
2157
+ title="rgb(128 0 0)"></div>
2158
+ </td>
2159
+ <td>
2160
+ <div class="color-cell" style="background-color: #800000;"
2161
+ data-bs-toggle="tooltip" data-bs-placement="top"
2162
+ title="#800000"></div>
2163
+ </td>
2164
+ <td class="match-indicator perfect"
2165
+ data-bs-toggle="tooltip" data-bs-placement="top"
2166
+ title="RGB distance: 0.00">
2167
+
2168
+ </td>
2169
+ </tr>
2170
+
2171
+ <tr>
2172
+ <td>
2173
+ <div class="color-cell" style="background-color: #808000;"
2174
+ data-bs-toggle="tooltip" data-bs-placement="top"
2175
+ title="#808000"></div>
2176
+ <div class="small fw-bold mt-1">olive</div>
2177
+ </td>
2178
+ <td>
2179
+ <div class="color-cell" style="background-color: lch(52.1500% 56.8165 99.559);"
2180
+ data-bs-toggle="tooltip" data-bs-placement="top"
2181
+ title="lch(52.1500% 56.8165 99.559)"></div>
2182
+ </td>
2183
+ <td>
2184
+ <div class="color-cell" style="background-color: lab(52.1500% -9.4352 56.0276);"
2185
+ data-bs-toggle="tooltip" data-bs-placement="top"
2186
+ title="lab(52.1500% -9.4352 56.0276)"></div>
2187
+ </td>
2188
+ <td>
2189
+ <div class="color-cell" style="background-color: oklab(0.5807 -0.0428 0.1191);"
2190
+ data-bs-toggle="tooltip" data-bs-placement="top"
2191
+ title="oklab(0.5807 -0.0428 0.1191)"></div>
2192
+ </td>
2193
+ <td>
2194
+ <div class="color-cell" style="background-color: hsl(60, 100%, 25%);"
2195
+ data-bs-toggle="tooltip" data-bs-placement="top"
2196
+ title="hsl(60, 100%, 25%)"></div>
2197
+ </td>
2198
+ <td>
2199
+ <div class="color-cell" style="background-color: hwb(60 0% 50%);"
2200
+ data-bs-toggle="tooltip" data-bs-placement="top"
2201
+ title="hwb(60 0% 50%)"></div>
2202
+ </td>
2203
+ <td>
2204
+ <div class="color-cell" style="background-color: rgb(128 128 0);"
2205
+ data-bs-toggle="tooltip" data-bs-placement="top"
2206
+ title="rgb(128 128 0)"></div>
2207
+ </td>
2208
+ <td>
2209
+ <div class="color-cell" style="background-color: #808000;"
2210
+ data-bs-toggle="tooltip" data-bs-placement="top"
2211
+ title="#808000"></div>
2212
+ </td>
2213
+ <td class="match-indicator perfect"
2214
+ data-bs-toggle="tooltip" data-bs-placement="top"
2215
+ title="RGB distance: 0.00">
2216
+
2217
+ </td>
2218
+ </tr>
2219
+
2220
+ <tr>
2221
+ <td>
2222
+ <div class="color-cell" style="background-color: #00ff00;"
2223
+ data-bs-toggle="tooltip" data-bs-placement="top"
2224
+ title="#00ff00"></div>
2225
+ <div class="small fw-bold mt-1">lime</div>
2226
+ </td>
2227
+ <td>
2228
+ <div class="color-cell" style="background-color: lch(87.8177% 113.3269 134.379);"
2229
+ data-bs-toggle="tooltip" data-bs-placement="top"
2230
+ title="lch(87.8177% 113.3269 134.379)"></div>
2231
+ </td>
2232
+ <td>
2233
+ <div class="color-cell" style="background-color: lab(87.8177% -79.2610 80.9981);"
2234
+ data-bs-toggle="tooltip" data-bs-placement="top"
2235
+ title="lab(87.8177% -79.2610 80.9981)"></div>
2236
+ </td>
2237
+ <td>
2238
+ <div class="color-cell" style="background-color: oklab(0.8664 -0.2339 0.1795);"
2239
+ data-bs-toggle="tooltip" data-bs-placement="top"
2240
+ title="oklab(0.8664 -0.2339 0.1795)"></div>
2241
+ </td>
2242
+ <td>
2243
+ <div class="color-cell" style="background-color: hsl(120, 100%, 50%);"
2244
+ data-bs-toggle="tooltip" data-bs-placement="top"
2245
+ title="hsl(120, 100%, 50%)"></div>
2246
+ </td>
2247
+ <td>
2248
+ <div class="color-cell" style="background-color: hwb(120 0% 0%);"
2249
+ data-bs-toggle="tooltip" data-bs-placement="top"
2250
+ title="hwb(120 0% 0%)"></div>
2251
+ </td>
2252
+ <td>
2253
+ <div class="color-cell" style="background-color: rgb(0 255 0);"
2254
+ data-bs-toggle="tooltip" data-bs-placement="top"
2255
+ title="rgb(0 255 0)"></div>
2256
+ </td>
2257
+ <td>
2258
+ <div class="color-cell" style="background-color: #00ff00;"
2259
+ data-bs-toggle="tooltip" data-bs-placement="top"
2260
+ title="#00ff00"></div>
2261
+ </td>
2262
+ <td class="match-indicator perfect"
2263
+ data-bs-toggle="tooltip" data-bs-placement="top"
2264
+ title="RGB distance: 0.00">
2265
+
2266
+ </td>
2267
+ </tr>
2268
+
2269
+ <tr>
2270
+ <td>
2271
+ <div class="color-cell" style="background-color: #00ffff;"
2272
+ data-bs-toggle="tooltip" data-bs-placement="top"
2273
+ title="#00ffff"></div>
2274
+ <div class="small fw-bold mt-1">aqua</div>
2275
+ </td>
2276
+ <td>
2277
+ <div class="color-cell" style="background-color: lch(90.6646% 52.8087 196.436);"
2278
+ data-bs-toggle="tooltip" data-bs-placement="top"
2279
+ title="lch(90.6646% 52.8087 196.436)"></div>
2280
+ </td>
2281
+ <td>
2282
+ <div class="color-cell" style="background-color: lab(90.6646% -50.6507 -14.9419);"
2283
+ data-bs-toggle="tooltip" data-bs-placement="top"
2284
+ title="lab(90.6646% -50.6507 -14.9419)"></div>
2285
+ </td>
2286
+ <td>
2287
+ <div class="color-cell" style="background-color: oklab(0.9054 -0.1494 -0.0394);"
2288
+ data-bs-toggle="tooltip" data-bs-placement="top"
2289
+ title="oklab(0.9054 -0.1494 -0.0394)"></div>
2290
+ </td>
2291
+ <td>
2292
+ <div class="color-cell" style="background-color: hsl(180, 100%, 50%);"
2293
+ data-bs-toggle="tooltip" data-bs-placement="top"
2294
+ title="hsl(180, 100%, 50%)"></div>
2295
+ </td>
2296
+ <td>
2297
+ <div class="color-cell" style="background-color: hwb(180 0% 0%);"
2298
+ data-bs-toggle="tooltip" data-bs-placement="top"
2299
+ title="hwb(180 0% 0%)"></div>
2300
+ </td>
2301
+ <td>
2302
+ <div class="color-cell" style="background-color: rgb(0 255 255);"
2303
+ data-bs-toggle="tooltip" data-bs-placement="top"
2304
+ title="rgb(0 255 255)"></div>
2305
+ </td>
2306
+ <td>
2307
+ <div class="color-cell" style="background-color: #00ffff;"
2308
+ data-bs-toggle="tooltip" data-bs-placement="top"
2309
+ title="#00ffff"></div>
2310
+ </td>
2311
+ <td class="match-indicator perfect"
2312
+ data-bs-toggle="tooltip" data-bs-placement="top"
2313
+ title="RGB distance: 0.00">
2314
+
2315
+ </td>
2316
+ </tr>
2317
+
2318
+ <tr>
2319
+ <td>
2320
+ <div class="color-cell" style="background-color: #008080;"
2321
+ data-bs-toggle="tooltip" data-bs-placement="top"
2322
+ title="#008080"></div>
2323
+ <div class="small fw-bold mt-1">teal</div>
2324
+ </td>
2325
+ <td>
2326
+ <div class="color-cell" style="background-color: lch(47.9850% 31.6784 196.436);"
2327
+ data-bs-toggle="tooltip" data-bs-placement="top"
2328
+ title="lch(47.9850% 31.6784 196.436)"></div>
2329
+ </td>
2330
+ <td>
2331
+ <div class="color-cell" style="background-color: lab(47.9850% -30.3839 -8.9632);"
2332
+ data-bs-toggle="tooltip" data-bs-placement="top"
2333
+ title="lab(47.9850% -30.3839 -8.9632)"></div>
2334
+ </td>
2335
+ <td>
2336
+ <div class="color-cell" style="background-color: oklab(0.5431 -0.0896 -0.0236);"
2337
+ data-bs-toggle="tooltip" data-bs-placement="top"
2338
+ title="oklab(0.5431 -0.0896 -0.0236)"></div>
2339
+ </td>
2340
+ <td>
2341
+ <div class="color-cell" style="background-color: hsl(180, 100%, 25%);"
2342
+ data-bs-toggle="tooltip" data-bs-placement="top"
2343
+ title="hsl(180, 100%, 25%)"></div>
2344
+ </td>
2345
+ <td>
2346
+ <div class="color-cell" style="background-color: hwb(180 0% 50%);"
2347
+ data-bs-toggle="tooltip" data-bs-placement="top"
2348
+ title="hwb(180 0% 50%)"></div>
2349
+ </td>
2350
+ <td>
2351
+ <div class="color-cell" style="background-color: rgb(0 128 128);"
2352
+ data-bs-toggle="tooltip" data-bs-placement="top"
2353
+ title="rgb(0 128 128)"></div>
2354
+ </td>
2355
+ <td>
2356
+ <div class="color-cell" style="background-color: #008080;"
2357
+ data-bs-toggle="tooltip" data-bs-placement="top"
2358
+ title="#008080"></div>
2359
+ </td>
2360
+ <td class="match-indicator perfect"
2361
+ data-bs-toggle="tooltip" data-bs-placement="top"
2362
+ title="RGB distance: 0.00">
2363
+
2364
+ </td>
2365
+ </tr>
2366
+
2367
+ <tr>
2368
+ <td>
2369
+ <div class="color-cell" style="background-color: #000080;"
2370
+ data-bs-toggle="tooltip" data-bs-placement="top"
2371
+ title="#000080"></div>
2372
+ <div class="small fw-bold mt-1">navy</div>
2373
+ </td>
2374
+ <td>
2375
+ <div class="color-cell" style="background-color: lch(11.3329% 78.6956 301.369);"
2376
+ data-bs-toggle="tooltip" data-bs-placement="top"
2377
+ title="lch(11.3329% 78.6956 301.369)"></div>
2378
+ </td>
2379
+ <td>
2380
+ <div class="color-cell" style="background-color: lab(11.3329% 40.9649 -67.1929);"
2381
+ data-bs-toggle="tooltip" data-bs-placement="top"
2382
+ title="lab(11.3329% 40.9649 -67.1929)"></div>
2383
+ </td>
2384
+ <td>
2385
+ <div class="color-cell" style="background-color: oklab(0.2711 -0.0195 -0.1869);"
2386
+ data-bs-toggle="tooltip" data-bs-placement="top"
2387
+ title="oklab(0.2711 -0.0195 -0.1869)"></div>
2388
+ </td>
2389
+ <td>
2390
+ <div class="color-cell" style="background-color: hsl(240, 100%, 25%);"
2391
+ data-bs-toggle="tooltip" data-bs-placement="top"
2392
+ title="hsl(240, 100%, 25%)"></div>
2393
+ </td>
2394
+ <td>
2395
+ <div class="color-cell" style="background-color: hwb(240 0% 50%);"
2396
+ data-bs-toggle="tooltip" data-bs-placement="top"
2397
+ title="hwb(240 0% 50%)"></div>
2398
+ </td>
2399
+ <td>
2400
+ <div class="color-cell" style="background-color: rgb(0 0 128);"
2401
+ data-bs-toggle="tooltip" data-bs-placement="top"
2402
+ title="rgb(0 0 128)"></div>
2403
+ </td>
2404
+ <td>
2405
+ <div class="color-cell" style="background-color: #000080;"
2406
+ data-bs-toggle="tooltip" data-bs-placement="top"
2407
+ title="#000080"></div>
2408
+ </td>
2409
+ <td class="match-indicator perfect"
2410
+ data-bs-toggle="tooltip" data-bs-placement="top"
2411
+ title="RGB distance: 0.00">
2412
+
2413
+ </td>
2414
+ </tr>
2415
+
2416
+ <tr>
2417
+ <td>
2418
+ <div class="color-cell" style="background-color: #ff00ff;"
2419
+ data-bs-toggle="tooltip" data-bs-placement="top"
2420
+ title="#ff00ff"></div>
2421
+ <div class="small fw-bold mt-1">fuchsia</div>
2422
+ </td>
2423
+ <td>
2424
+ <div class="color-cell" style="background-color: lch(60.1708% 111.3956 327.120);"
2425
+ data-bs-toggle="tooltip" data-bs-placement="top"
2426
+ title="lch(60.1708% 111.3956 327.120)"></div>
2427
+ </td>
2428
+ <td>
2429
+ <div class="color-cell" style="background-color: lab(60.1708% 93.5511 -60.4746);"
2430
+ data-bs-toggle="tooltip" data-bs-placement="top"
2431
+ title="lab(60.1708% 93.5511 -60.4746)"></div>
2432
+ </td>
2433
+ <td>
2434
+ <div class="color-cell" style="background-color: oklab(0.7017 0.2746 -0.1692);"
2435
+ data-bs-toggle="tooltip" data-bs-placement="top"
2436
+ title="oklab(0.7017 0.2746 -0.1692)"></div>
2437
+ </td>
2438
+ <td>
2439
+ <div class="color-cell" style="background-color: hsl(300, 100%, 50%);"
2440
+ data-bs-toggle="tooltip" data-bs-placement="top"
2441
+ title="hsl(300, 100%, 50%)"></div>
2442
+ </td>
2443
+ <td>
2444
+ <div class="color-cell" style="background-color: hwb(300 0% 0%);"
2445
+ data-bs-toggle="tooltip" data-bs-placement="top"
2446
+ title="hwb(300 0% 0%)"></div>
2447
+ </td>
2448
+ <td>
2449
+ <div class="color-cell" style="background-color: rgb(255 0 255);"
2450
+ data-bs-toggle="tooltip" data-bs-placement="top"
2451
+ title="rgb(255 0 255)"></div>
2452
+ </td>
2453
+ <td>
2454
+ <div class="color-cell" style="background-color: #ff00ff;"
2455
+ data-bs-toggle="tooltip" data-bs-placement="top"
2456
+ title="#ff00ff"></div>
2457
+ </td>
2458
+ <td class="match-indicator perfect"
2459
+ data-bs-toggle="tooltip" data-bs-placement="top"
2460
+ title="RGB distance: 0.00">
2461
+
2462
+ </td>
2463
+ </tr>
2464
+
2465
+ <tr>
2466
+ <td>
2467
+ <div class="color-cell" style="background-color: #800080;"
2468
+ data-bs-toggle="tooltip" data-bs-placement="top"
2469
+ title="#800080"></div>
2470
+ <div class="small fw-bold mt-1">purple</div>
2471
+ </td>
2472
+ <td>
2473
+ <div class="color-cell" style="background-color: lch(29.6926% 66.8229 327.120);"
2474
+ data-bs-toggle="tooltip" data-bs-placement="top"
2475
+ title="lch(29.6926% 66.8229 327.120)"></div>
2476
+ </td>
2477
+ <td>
2478
+ <div class="color-cell" style="background-color: lab(29.6926% 56.1185 -36.2769);"
2479
+ data-bs-toggle="tooltip" data-bs-placement="top"
2480
+ title="lab(29.6926% 56.1185 -36.2769)"></div>
2481
+ </td>
2482
+ <td>
2483
+ <div class="color-cell" style="background-color: oklab(0.4209 0.1647 -0.1015);"
2484
+ data-bs-toggle="tooltip" data-bs-placement="top"
2485
+ title="oklab(0.4209 0.1647 -0.1015)"></div>
2486
+ </td>
2487
+ <td>
2488
+ <div class="color-cell" style="background-color: hsl(300, 100%, 25%);"
2489
+ data-bs-toggle="tooltip" data-bs-placement="top"
2490
+ title="hsl(300, 100%, 25%)"></div>
2491
+ </td>
2492
+ <td>
2493
+ <div class="color-cell" style="background-color: hwb(300 0% 50%);"
2494
+ data-bs-toggle="tooltip" data-bs-placement="top"
2495
+ title="hwb(300 0% 50%)"></div>
2496
+ </td>
2497
+ <td>
2498
+ <div class="color-cell" style="background-color: rgb(128 0 128);"
2499
+ data-bs-toggle="tooltip" data-bs-placement="top"
2500
+ title="rgb(128 0 128)"></div>
2501
+ </td>
2502
+ <td>
2503
+ <div class="color-cell" style="background-color: #800080;"
2504
+ data-bs-toggle="tooltip" data-bs-placement="top"
2505
+ title="#800080"></div>
2506
+ </td>
2507
+ <td class="match-indicator perfect"
2508
+ data-bs-toggle="tooltip" data-bs-placement="top"
2509
+ title="RGB distance: 0.00">
2510
+
2511
+ </td>
2512
+ </tr>
2513
+
2514
+ <tr>
2515
+ <td>
2516
+ <div class="color-cell" style="background-color: #ffa500;"
2517
+ data-bs-toggle="tooltip" data-bs-placement="top"
2518
+ title="#ffa500"></div>
2519
+ <div class="small fw-bold mt-1">orange</div>
2520
+ </td>
2521
+ <td>
2522
+ <div class="color-cell" style="background-color: lch(75.5917% 83.7808 70.813);"
2523
+ data-bs-toggle="tooltip" data-bs-placement="top"
2524
+ title="lch(75.5917% 83.7808 70.813)"></div>
2525
+ </td>
2526
+ <td>
2527
+ <div class="color-cell" style="background-color: lab(75.5917% 27.5347 79.1269);"
2528
+ data-bs-toggle="tooltip" data-bs-placement="top"
2529
+ title="lab(75.5917% 27.5347 79.1269)"></div>
2530
+ </td>
2531
+ <td>
2532
+ <div class="color-cell" style="background-color: oklab(0.7927 0.0566 0.1614);"
2533
+ data-bs-toggle="tooltip" data-bs-placement="top"
2534
+ title="oklab(0.7927 0.0566 0.1614)"></div>
2535
+ </td>
2536
+ <td>
2537
+ <div class="color-cell" style="background-color: hsl(39, 100%, 50%);"
2538
+ data-bs-toggle="tooltip" data-bs-placement="top"
2539
+ title="hsl(39, 100%, 50%)"></div>
2540
+ </td>
2541
+ <td>
2542
+ <div class="color-cell" style="background-color: hwb(39 0% 0%);"
2543
+ data-bs-toggle="tooltip" data-bs-placement="top"
2544
+ title="hwb(39 0% 0%)"></div>
2545
+ </td>
2546
+ <td>
2547
+ <div class="color-cell" style="background-color: rgb(255 166 0);"
2548
+ data-bs-toggle="tooltip" data-bs-placement="top"
2549
+ title="rgb(255 166 0)"></div>
2550
+ </td>
2551
+ <td>
2552
+ <div class="color-cell" style="background-color: #ffa600;"
2553
+ data-bs-toggle="tooltip" data-bs-placement="top"
2554
+ title="#ffa600"></div>
2555
+ </td>
2556
+ <td class="match-indicator close"
2557
+ data-bs-toggle="tooltip" data-bs-placement="top"
2558
+ title="RGB distance: 1.00">
2559
+
2560
+ </td>
2561
+ </tr>
2562
+
2563
+ <tr>
2564
+ <td>
2565
+ <div class="color-cell" style="background-color: #ffc0cb;"
2566
+ data-bs-toggle="tooltip" data-bs-placement="top"
2567
+ title="#ffc0cb"></div>
2568
+ <div class="small fw-bold mt-1">pink</div>
2569
+ </td>
2570
+ <td>
2571
+ <div class="color-cell" style="background-color: lch(83.7882% 24.7442 8.787);"
2572
+ data-bs-toggle="tooltip" data-bs-placement="top"
2573
+ title="lch(83.7882% 24.7442 8.787)"></div>
2574
+ </td>
2575
+ <td>
2576
+ <div class="color-cell" style="background-color: lab(83.7882% 24.4538 3.7800);"
2577
+ data-bs-toggle="tooltip" data-bs-placement="top"
2578
+ title="lab(83.7882% 24.4538 3.7800)"></div>
2579
+ </td>
2580
+ <td>
2581
+ <div class="color-cell" style="background-color: oklab(0.8677 0.0730 0.0091);"
2582
+ data-bs-toggle="tooltip" data-bs-placement="top"
2583
+ title="oklab(0.8677 0.0730 0.0091)"></div>
2584
+ </td>
2585
+ <td>
2586
+ <div class="color-cell" style="background-color: hsl(350, 100%, 88%);"
2587
+ data-bs-toggle="tooltip" data-bs-placement="top"
2588
+ title="hsl(350, 100%, 88%)"></div>
2589
+ </td>
2590
+ <td>
2591
+ <div class="color-cell" style="background-color: hwb(350 76% 0%);"
2592
+ data-bs-toggle="tooltip" data-bs-placement="top"
2593
+ title="hwb(350 76% 0%)"></div>
2594
+ </td>
2595
+ <td>
2596
+ <div class="color-cell" style="background-color: rgb(255 194 204);"
2597
+ data-bs-toggle="tooltip" data-bs-placement="top"
2598
+ title="rgb(255 194 204)"></div>
2599
+ </td>
2600
+ <td>
2601
+ <div class="color-cell" style="background-color: #ffc2cc;"
2602
+ data-bs-toggle="tooltip" data-bs-placement="top"
2603
+ title="#ffc2cc"></div>
2604
+ </td>
2605
+ <td class="match-indicator off"
2606
+ data-bs-toggle="tooltip" data-bs-placement="top"
2607
+ title="RGB distance: 2.24">
2608
+
2609
+ </td>
2610
+ </tr>
2611
+
2612
+ <tr>
2613
+ <td>
2614
+ <div class="color-cell" style="background-color: #ff7f50;"
2615
+ data-bs-toggle="tooltip" data-bs-placement="top"
2616
+ title="#ff7f50"></div>
2617
+ <div class="small fw-bold mt-1">coral</div>
2618
+ </td>
2619
+ <td>
2620
+ <div class="color-cell" style="background-color: lch(67.9861% 67.8991 45.724);"
2621
+ data-bs-toggle="tooltip" data-bs-placement="top"
2622
+ title="lch(67.9861% 67.8991 45.724)"></div>
2623
+ </td>
2624
+ <td>
2625
+ <div class="color-cell" style="background-color: lab(67.9861% 47.4014 48.6148);"
2626
+ data-bs-toggle="tooltip" data-bs-placement="top"
2627
+ title="lab(67.9861% 47.4014 48.6148)"></div>
2628
+ </td>
2629
+ <td>
2630
+ <div class="color-cell" style="background-color: oklab(0.7351 0.1282 0.1085);"
2631
+ data-bs-toggle="tooltip" data-bs-placement="top"
2632
+ title="oklab(0.7351 0.1282 0.1085)"></div>
2633
+ </td>
2634
+ <td>
2635
+ <div class="color-cell" style="background-color: hsl(16, 100%, 66%);"
2636
+ data-bs-toggle="tooltip" data-bs-placement="top"
2637
+ title="hsl(16, 100%, 66%)"></div>
2638
+ </td>
2639
+ <td>
2640
+ <div class="color-cell" style="background-color: hwb(16 32% 0%);"
2641
+ data-bs-toggle="tooltip" data-bs-placement="top"
2642
+ title="hwb(16 32% 0%)"></div>
2643
+ </td>
2644
+ <td>
2645
+ <div class="color-cell" style="background-color: rgb(255 128 82);"
2646
+ data-bs-toggle="tooltip" data-bs-placement="top"
2647
+ title="rgb(255 128 82)"></div>
2648
+ </td>
2649
+ <td>
2650
+ <div class="color-cell" style="background-color: #ff8052;"
2651
+ data-bs-toggle="tooltip" data-bs-placement="top"
2652
+ title="#ff8052"></div>
2653
+ </td>
2654
+ <td class="match-indicator off"
2655
+ data-bs-toggle="tooltip" data-bs-placement="top"
2656
+ title="RGB distance: 2.24">
2657
+
2658
+ </td>
2659
+ </tr>
2660
+
2661
+ <tr>
2662
+ <td>
2663
+ <div class="color-cell" style="background-color: #ff6347;"
2664
+ data-bs-toggle="tooltip" data-bs-placement="top"
2665
+ title="#ff6347"></div>
2666
+ <div class="small fw-bold mt-1">tomato</div>
2667
+ </td>
2668
+ <td>
2669
+ <div class="color-cell" style="background-color: lch(62.9936% 76.2880 38.887);"
2670
+ data-bs-toggle="tooltip" data-bs-placement="top"
2671
+ title="lch(62.9936% 76.2880 38.887)"></div>
2672
+ </td>
2673
+ <td>
2674
+ <div class="color-cell" style="background-color: lab(62.9936% 59.3814 47.8926);"
2675
+ data-bs-toggle="tooltip" data-bs-placement="top"
2676
+ title="lab(62.9936% 59.3814 47.8926)"></div>
2677
+ </td>
2678
+ <td>
2679
+ <div class="color-cell" style="background-color: oklab(0.6962 0.1652 0.1045);"
2680
+ data-bs-toggle="tooltip" data-bs-placement="top"
2681
+ title="oklab(0.6962 0.1652 0.1045)"></div>
2682
+ </td>
2683
+ <td>
2684
+ <div class="color-cell" style="background-color: hsl(9, 100%, 64%);"
2685
+ data-bs-toggle="tooltip" data-bs-placement="top"
2686
+ title="hsl(9, 100%, 64%)"></div>
2687
+ </td>
2688
+ <td>
2689
+ <div class="color-cell" style="background-color: hwb(9 28% 0%);"
2690
+ data-bs-toggle="tooltip" data-bs-placement="top"
2691
+ title="hwb(9 28% 0%)"></div>
2692
+ </td>
2693
+ <td>
2694
+ <div class="color-cell" style="background-color: rgb(255 99 71);"
2695
+ data-bs-toggle="tooltip" data-bs-placement="top"
2696
+ title="rgb(255 99 71)"></div>
2697
+ </td>
2698
+ <td>
2699
+ <div class="color-cell" style="background-color: #ff6347;"
2700
+ data-bs-toggle="tooltip" data-bs-placement="top"
2701
+ title="#ff6347"></div>
2702
+ </td>
2703
+ <td class="match-indicator perfect"
2704
+ data-bs-toggle="tooltip" data-bs-placement="top"
2705
+ title="RGB distance: 0.00">
2706
+
2707
+ </td>
2708
+ </tr>
2709
+
2710
+ <tr>
2711
+ <td>
2712
+ <div class="color-cell" style="background-color: #ffd700;"
2713
+ data-bs-toggle="tooltip" data-bs-placement="top"
2714
+ title="#ffd700"></div>
2715
+ <div class="small fw-bold mt-1">gold</div>
2716
+ </td>
2717
+ <td>
2718
+ <div class="color-cell" style="background-color: lch(87.4691% 86.6080 88.061);"
2719
+ data-bs-toggle="tooltip" data-bs-placement="top"
2720
+ title="lch(87.4691% 86.6080 88.061)"></div>
2721
+ </td>
2722
+ <td>
2723
+ <div class="color-cell" style="background-color: lab(87.4691% 2.9304 86.5585);"
2724
+ data-bs-toggle="tooltip" data-bs-placement="top"
2725
+ title="lab(87.4691% 2.9304 86.5585)"></div>
2726
+ </td>
2727
+ <td>
2728
+ <div class="color-cell" style="background-color: oklab(0.8868 -0.0169 0.1814);"
2729
+ data-bs-toggle="tooltip" data-bs-placement="top"
2730
+ title="oklab(0.8868 -0.0169 0.1814)"></div>
2731
+ </td>
2732
+ <td>
2733
+ <div class="color-cell" style="background-color: hsl(51, 100%, 50%);"
2734
+ data-bs-toggle="tooltip" data-bs-placement="top"
2735
+ title="hsl(51, 100%, 50%)"></div>
2736
+ </td>
2737
+ <td>
2738
+ <div class="color-cell" style="background-color: hwb(51 0% 0%);"
2739
+ data-bs-toggle="tooltip" data-bs-placement="top"
2740
+ title="hwb(51 0% 0%)"></div>
2741
+ </td>
2742
+ <td>
2743
+ <div class="color-cell" style="background-color: rgb(255 217 0);"
2744
+ data-bs-toggle="tooltip" data-bs-placement="top"
2745
+ title="rgb(255 217 0)"></div>
2746
+ </td>
2747
+ <td>
2748
+ <div class="color-cell" style="background-color: #ffd900;"
2749
+ data-bs-toggle="tooltip" data-bs-placement="top"
2750
+ title="#ffd900"></div>
2751
+ </td>
2752
+ <td class="match-indicator off"
2753
+ data-bs-toggle="tooltip" data-bs-placement="top"
2754
+ title="RGB distance: 2.00">
2755
+
2756
+ </td>
2757
+ </tr>
2758
+
2759
+ <tr>
2760
+ <td>
2761
+ <div class="color-cell" style="background-color: #4b0082;"
2762
+ data-bs-toggle="tooltip" data-bs-placement="top"
2763
+ title="#4b0082"></div>
2764
+ <div class="small fw-bold mt-1">indigo</div>
2765
+ </td>
2766
+ <td>
2767
+ <div class="color-cell" style="background-color: lch(19.7149% 71.8098 310.917);"
2768
+ data-bs-toggle="tooltip" data-bs-placement="top"
2769
+ title="lch(19.7149% 71.8098 310.917)"></div>
2770
+ </td>
2771
+ <td>
2772
+ <div class="color-cell" style="background-color: lab(19.7149% 47.0329 -54.2637);"
2773
+ data-bs-toggle="tooltip" data-bs-placement="top"
2774
+ title="lab(19.7149% 47.0329 -54.2637)"></div>
2775
+ </td>
2776
+ <td>
2777
+ <div class="color-cell" style="background-color: oklab(0.3390 0.0942 -0.1526);"
2778
+ data-bs-toggle="tooltip" data-bs-placement="top"
2779
+ title="oklab(0.3390 0.0942 -0.1526)"></div>
2780
+ </td>
2781
+ <td>
2782
+ <div class="color-cell" style="background-color: hsl(275, 100%, 25%);"
2783
+ data-bs-toggle="tooltip" data-bs-placement="top"
2784
+ title="hsl(275, 100%, 25%)"></div>
2785
+ </td>
2786
+ <td>
2787
+ <div class="color-cell" style="background-color: hwb(275 0% 50%);"
2788
+ data-bs-toggle="tooltip" data-bs-placement="top"
2789
+ title="hwb(275 0% 50%)"></div>
2790
+ </td>
2791
+ <td>
2792
+ <div class="color-cell" style="background-color: rgb(74 0 128);"
2793
+ data-bs-toggle="tooltip" data-bs-placement="top"
2794
+ title="rgb(74 0 128)"></div>
2795
+ </td>
2796
+ <td>
2797
+ <div class="color-cell" style="background-color: #4a0080;"
2798
+ data-bs-toggle="tooltip" data-bs-placement="top"
2799
+ title="#4a0080"></div>
2800
+ </td>
2801
+ <td class="match-indicator off"
2802
+ data-bs-toggle="tooltip" data-bs-placement="top"
2803
+ title="RGB distance: 2.24">
2804
+
2805
+ </td>
2806
+ </tr>
2807
+
2808
+ <tr>
2809
+ <td>
2810
+ <div class="color-cell" style="background-color: #ee82ee;"
2811
+ data-bs-toggle="tooltip" data-bs-placement="top"
2812
+ title="#ee82ee"></div>
2813
+ <div class="small fw-bold mt-1">violet</div>
2814
+ </td>
2815
+ <td>
2816
+ <div class="color-cell" style="background-color: lch(69.6191% 64.6149 325.590);"
2817
+ data-bs-toggle="tooltip" data-bs-placement="top"
2818
+ title="lch(69.6191% 64.6149 325.590)"></div>
2819
+ </td>
2820
+ <td>
2821
+ <div class="color-cell" style="background-color: lab(69.6191% 53.3082 -36.5146);"
2822
+ data-bs-toggle="tooltip" data-bs-placement="top"
2823
+ title="lab(69.6191% 53.3082 -36.5146)"></div>
2824
+ </td>
2825
+ <td>
2826
+ <div class="color-cell" style="background-color: oklab(0.7619 0.1565 -0.1008);"
2827
+ data-bs-toggle="tooltip" data-bs-placement="top"
2828
+ title="oklab(0.7619 0.1565 -0.1008)"></div>
2829
+ </td>
2830
+ <td>
2831
+ <div class="color-cell" style="background-color: hsl(300, 76%, 72%);"
2832
+ data-bs-toggle="tooltip" data-bs-placement="top"
2833
+ title="hsl(300, 76%, 72%)"></div>
2834
+ </td>
2835
+ <td>
2836
+ <div class="color-cell" style="background-color: hwb(300 51% 7%);"
2837
+ data-bs-toggle="tooltip" data-bs-placement="top"
2838
+ title="hwb(300 51% 7%)"></div>
2839
+ </td>
2840
+ <td>
2841
+ <div class="color-cell" style="background-color: rgb(237 130 237);"
2842
+ data-bs-toggle="tooltip" data-bs-placement="top"
2843
+ title="rgb(237 130 237)"></div>
2844
+ </td>
2845
+ <td>
2846
+ <div class="color-cell" style="background-color: #ed82ed;"
2847
+ data-bs-toggle="tooltip" data-bs-placement="top"
2848
+ title="#ed82ed"></div>
2849
+ </td>
2850
+ <td class="match-indicator close"
2851
+ data-bs-toggle="tooltip" data-bs-placement="top"
2852
+ title="RGB distance: 1.41">
2853
+
2854
+ </td>
2855
+ </tr>
2856
+
2857
+ <tr>
2858
+ <td>
2859
+ <div class="color-cell" style="background-color: #a52a2a;"
2860
+ data-bs-toggle="tooltip" data-bs-placement="top"
2861
+ title="#a52a2a"></div>
2862
+ <div class="small fw-bold mt-1">brown</div>
2863
+ </td>
2864
+ <td>
2865
+ <div class="color-cell" style="background-color: lch(38.1512% 59.6128 32.288);"
2866
+ data-bs-toggle="tooltip" data-bs-placement="top"
2867
+ title="lch(38.1512% 59.6128 32.288)"></div>
2868
+ </td>
2869
+ <td>
2870
+ <div class="color-cell" style="background-color: lab(38.1512% 50.3951 31.8437);"
2871
+ data-bs-toggle="tooltip" data-bs-placement="top"
2872
+ title="lab(38.1512% 50.3951 31.8437)"></div>
2873
+ </td>
2874
+ <td>
2875
+ <div class="color-cell" style="background-color: oklab(0.4806 0.1440 0.0689);"
2876
+ data-bs-toggle="tooltip" data-bs-placement="top"
2877
+ title="oklab(0.4806 0.1440 0.0689)"></div>
2878
+ </td>
2879
+ <td>
2880
+ <div class="color-cell" style="background-color: hsl(0, 59%, 41%);"
2881
+ data-bs-toggle="tooltip" data-bs-placement="top"
2882
+ title="hsl(0, 59%, 41%)"></div>
2883
+ </td>
2884
+ <td>
2885
+ <div class="color-cell" style="background-color: hwb(0 17% 35%);"
2886
+ data-bs-toggle="tooltip" data-bs-placement="top"
2887
+ title="hwb(0 17% 35%)"></div>
2888
+ </td>
2889
+ <td>
2890
+ <div class="color-cell" style="background-color: rgb(166 43 43);"
2891
+ data-bs-toggle="tooltip" data-bs-placement="top"
2892
+ title="rgb(166 43 43)"></div>
2893
+ </td>
2894
+ <td>
2895
+ <div class="color-cell" style="background-color: #a62b2b;"
2896
+ data-bs-toggle="tooltip" data-bs-placement="top"
2897
+ title="#a62b2b"></div>
2898
+ </td>
2899
+ <td class="match-indicator close"
2900
+ data-bs-toggle="tooltip" data-bs-placement="top"
2901
+ title="RGB distance: 1.73">
2902
+
2903
+ </td>
2904
+ </tr>
2905
+
2906
+ <tr>
2907
+ <td>
2908
+ <div class="color-cell" style="background-color: #d2b48c;"
2909
+ data-bs-toggle="tooltip" data-bs-placement="top"
2910
+ title="#d2b48c"></div>
2911
+ <div class="small fw-bold mt-1">tan</div>
2912
+ </td>
2913
+ <td>
2914
+ <div class="color-cell" style="background-color: lch(75.2329% 25.6524 74.297);"
2915
+ data-bs-toggle="tooltip" data-bs-placement="top"
2916
+ title="lch(75.2329% 25.6524 74.297)"></div>
2917
+ </td>
2918
+ <td>
2919
+ <div class="color-cell" style="background-color: lab(75.2329% 6.9428 24.6950);"
2920
+ data-bs-toggle="tooltip" data-bs-placement="top"
2921
+ title="lab(75.2329% 6.9428 24.6950)"></div>
2922
+ </td>
2923
+ <td>
2924
+ <div class="color-cell" style="background-color: oklab(0.7862 0.0169 0.0615);"
2925
+ data-bs-toggle="tooltip" data-bs-placement="top"
2926
+ title="oklab(0.7862 0.0169 0.0615)"></div>
2927
+ </td>
2928
+ <td>
2929
+ <div class="color-cell" style="background-color: hsl(34, 44%, 69%);"
2930
+ data-bs-toggle="tooltip" data-bs-placement="top"
2931
+ title="hsl(34, 44%, 69%)"></div>
2932
+ </td>
2933
+ <td>
2934
+ <div class="color-cell" style="background-color: hwb(34 55% 17%);"
2935
+ data-bs-toggle="tooltip" data-bs-placement="top"
2936
+ title="hwb(34 55% 17%)"></div>
2937
+ </td>
2938
+ <td>
2939
+ <div class="color-cell" style="background-color: rgb(212 181 140);"
2940
+ data-bs-toggle="tooltip" data-bs-placement="top"
2941
+ title="rgb(212 181 140)"></div>
2942
+ </td>
2943
+ <td>
2944
+ <div class="color-cell" style="background-color: #d4b58c;"
2945
+ data-bs-toggle="tooltip" data-bs-placement="top"
2946
+ title="#d4b58c"></div>
2947
+ </td>
2948
+ <td class="match-indicator off"
2949
+ data-bs-toggle="tooltip" data-bs-placement="top"
2950
+ title="RGB distance: 2.24">
2951
+
2952
+ </td>
2953
+ </tr>
2954
+
2955
+ <tr>
2956
+ <td>
2957
+ <div class="color-cell" style="background-color: #f0e68c;"
2958
+ data-bs-toggle="tooltip" data-bs-placement="top"
2959
+ title="#f0e68c"></div>
2960
+ <div class="small fw-bold mt-1">khaki</div>
2961
+ </td>
2962
+ <td>
2963
+ <div class="color-cell" style="background-color: lch(90.6454% 45.3569 97.063);"
2964
+ data-bs-toggle="tooltip" data-bs-placement="top"
2965
+ title="lch(90.6454% 45.3569 97.063)"></div>
2966
+ </td>
2967
+ <td>
2968
+ <div class="color-cell" style="background-color: lab(90.6454% -5.5772 45.0127);"
2969
+ data-bs-toggle="tooltip" data-bs-placement="top"
2970
+ title="lab(90.6454% -5.5772 45.0127)"></div>
2971
+ </td>
2972
+ <td>
2973
+ <div class="color-cell" style="background-color: oklab(0.9135 -0.0249 0.1091);"
2974
+ data-bs-toggle="tooltip" data-bs-placement="top"
2975
+ title="oklab(0.9135 -0.0249 0.1091)"></div>
2976
+ </td>
2977
+ <td>
2978
+ <div class="color-cell" style="background-color: hsl(54, 77%, 75%);"
2979
+ data-bs-toggle="tooltip" data-bs-placement="top"
2980
+ title="hsl(54, 77%, 75%)"></div>
2981
+ </td>
2982
+ <td>
2983
+ <div class="color-cell" style="background-color: hwb(54 56% 6%);"
2984
+ data-bs-toggle="tooltip" data-bs-placement="top"
2985
+ title="hwb(54 56% 6%)"></div>
2986
+ </td>
2987
+ <td>
2988
+ <div class="color-cell" style="background-color: rgb(240 230 143);"
2989
+ data-bs-toggle="tooltip" data-bs-placement="top"
2990
+ title="rgb(240 230 143)"></div>
2991
+ </td>
2992
+ <td>
2993
+ <div class="color-cell" style="background-color: #f0e68f;"
2994
+ data-bs-toggle="tooltip" data-bs-placement="top"
2995
+ title="#f0e68f"></div>
2996
+ </td>
2997
+ <td class="match-indicator off"
2998
+ data-bs-toggle="tooltip" data-bs-placement="top"
2999
+ title="RGB distance: 3.00">
3000
+
3001
+ </td>
3002
+ </tr>
3003
+
3004
+ <tr>
3005
+ <td>
3006
+ <div class="color-cell" style="background-color: #fa8072;"
3007
+ data-bs-toggle="tooltip" data-bs-placement="top"
3008
+ title="#fa8072"></div>
3009
+ <div class="small fw-bold mt-1">salmon</div>
3010
+ </td>
3011
+ <td>
3012
+ <div class="color-cell" style="background-color: lch(67.8488% 55.5555 32.900);"
3013
+ data-bs-toggle="tooltip" data-bs-placement="top"
3014
+ title="lch(67.8488% 55.5555 32.900)"></div>
3015
+ </td>
3016
+ <td>
3017
+ <div class="color-cell" style="background-color: lab(67.8488% 46.6455 30.1764);"
3018
+ data-bs-toggle="tooltip" data-bs-placement="top"
3019
+ title="lab(67.8488% 46.6455 30.1764)"></div>
3020
+ </td>
3021
+ <td>
3022
+ <div class="color-cell" style="background-color: oklab(0.7350 0.1337 0.0713);"
3023
+ data-bs-toggle="tooltip" data-bs-placement="top"
3024
+ title="oklab(0.7350 0.1337 0.0713)"></div>
3025
+ </td>
3026
+ <td>
3027
+ <div class="color-cell" style="background-color: hsl(6, 93%, 71%);"
3028
+ data-bs-toggle="tooltip" data-bs-placement="top"
3029
+ title="hsl(6, 93%, 71%)"></div>
3030
+ </td>
3031
+ <td>
3032
+ <div class="color-cell" style="background-color: hwb(6 44% 2%);"
3033
+ data-bs-toggle="tooltip" data-bs-placement="top"
3034
+ title="hwb(6 44% 2%)"></div>
3035
+ </td>
3036
+ <td>
3037
+ <div class="color-cell" style="background-color: rgb(250 126 112);"
3038
+ data-bs-toggle="tooltip" data-bs-placement="top"
3039
+ title="rgb(250 126 112)"></div>
3040
+ </td>
3041
+ <td>
3042
+ <div class="color-cell" style="background-color: #fa7e70;"
3043
+ data-bs-toggle="tooltip" data-bs-placement="top"
3044
+ title="#fa7e70"></div>
3045
+ </td>
3046
+ <td class="match-indicator off"
3047
+ data-bs-toggle="tooltip" data-bs-placement="top"
3048
+ title="RGB distance: 2.83">
3049
+
3050
+ </td>
3051
+ </tr>
3052
+
3053
+ <tr>
3054
+ <td>
3055
+ <div class="color-cell" style="background-color: #dc143c;"
3056
+ data-bs-toggle="tooltip" data-bs-placement="top"
3057
+ title="#dc143c"></div>
3058
+ <div class="small fw-bold mt-1">crimson</div>
3059
+ </td>
3060
+ <td>
3061
+ <div class="color-cell" style="background-color: lch(47.8818% 79.6360 26.468);"
3062
+ data-bs-toggle="tooltip" data-bs-placement="top"
3063
+ title="lch(47.8818% 79.6360 26.468)"></div>
3064
+ </td>
3065
+ <td>
3066
+ <div class="color-cell" style="background-color: lab(47.8818% 71.2888 35.4936);"
3067
+ data-bs-toggle="tooltip" data-bs-placement="top"
3068
+ title="lab(47.8818% 71.2888 35.4936)"></div>
3069
+ </td>
3070
+ <td>
3071
+ <div class="color-cell" style="background-color: oklab(0.5712 0.2084 0.0762);"
3072
+ data-bs-toggle="tooltip" data-bs-placement="top"
3073
+ title="oklab(0.5712 0.2084 0.0762)"></div>
3074
+ </td>
3075
+ <td>
3076
+ <div class="color-cell" style="background-color: hsl(348, 83%, 47%);"
3077
+ data-bs-toggle="tooltip" data-bs-placement="top"
3078
+ title="hsl(348, 83%, 47%)"></div>
3079
+ </td>
3080
+ <td>
3081
+ <div class="color-cell" style="background-color: hwb(348 8% 14%);"
3082
+ data-bs-toggle="tooltip" data-bs-placement="top"
3083
+ title="hwb(348 8% 14%)"></div>
3084
+ </td>
3085
+ <td>
3086
+ <div class="color-cell" style="background-color: rgb(219 20 60);"
3087
+ data-bs-toggle="tooltip" data-bs-placement="top"
3088
+ title="rgb(219 20 60)"></div>
3089
+ </td>
3090
+ <td>
3091
+ <div class="color-cell" style="background-color: #db143c;"
3092
+ data-bs-toggle="tooltip" data-bs-placement="top"
3093
+ title="#db143c"></div>
3094
+ </td>
3095
+ <td class="match-indicator close"
3096
+ data-bs-toggle="tooltip" data-bs-placement="top"
3097
+ title="RGB distance: 1.00">
3098
+
3099
+ </td>
3100
+ </tr>
3101
+
3102
+ <tr>
3103
+ <td>
3104
+ <div class="color-cell" style="background-color: #d2691e;"
3105
+ data-bs-toggle="tooltip" data-bs-placement="top"
3106
+ title="#d2691e"></div>
3107
+ <div class="small fw-bold mt-1">chocolate</div>
3108
+ </td>
3109
+ <td>
3110
+ <div class="color-cell" style="background-color: lch(56.6313% 69.6708 55.709);"
3111
+ data-bs-toggle="tooltip" data-bs-placement="top"
3112
+ title="lch(56.6313% 69.6708 55.709)"></div>
3113
+ </td>
3114
+ <td>
3115
+ <div class="color-cell" style="background-color: lab(56.6313% 39.2522 57.5611);"
3116
+ data-bs-toggle="tooltip" data-bs-placement="top"
3117
+ title="lab(56.6313% 39.2522 57.5611)"></div>
3118
+ </td>
3119
+ <td>
3120
+ <div class="color-cell" style="background-color: oklab(0.6344 0.0991 0.1192);"
3121
+ data-bs-toggle="tooltip" data-bs-placement="top"
3122
+ title="oklab(0.6344 0.0991 0.1192)"></div>
3123
+ </td>
3124
+ <td>
3125
+ <div class="color-cell" style="background-color: hsl(25, 75%, 47%);"
3126
+ data-bs-toggle="tooltip" data-bs-placement="top"
3127
+ title="hsl(25, 75%, 47%)"></div>
3128
+ </td>
3129
+ <td>
3130
+ <div class="color-cell" style="background-color: hwb(25 12% 18%);"
3131
+ data-bs-toggle="tooltip" data-bs-placement="top"
3132
+ title="hwb(25 12% 18%)"></div>
3133
+ </td>
3134
+ <td>
3135
+ <div class="color-cell" style="background-color: rgb(209 105 31);"
3136
+ data-bs-toggle="tooltip" data-bs-placement="top"
3137
+ title="rgb(209 105 31)"></div>
3138
+ </td>
3139
+ <td>
3140
+ <div class="color-cell" style="background-color: #d1691f;"
3141
+ data-bs-toggle="tooltip" data-bs-placement="top"
3142
+ title="#d1691f"></div>
3143
+ </td>
3144
+ <td class="match-indicator close"
3145
+ data-bs-toggle="tooltip" data-bs-placement="top"
3146
+ title="RGB distance: 1.41">
3147
+
3148
+ </td>
3149
+ </tr>
3150
+
3151
+ <tr>
3152
+ <td>
3153
+ <div class="color-cell" style="background-color: #cd853f;"
3154
+ data-bs-toggle="tooltip" data-bs-placement="top"
3155
+ title="#cd853f"></div>
3156
+ <div class="small fw-bold mt-1">peru</div>
3157
+ </td>
3158
+ <td>
3159
+ <div class="color-cell" style="background-color: lch(62.2542% 54.0273 63.670);"
3160
+ data-bs-toggle="tooltip" data-bs-placement="top"
3161
+ title="lch(62.2542% 54.0273 63.670)"></div>
3162
+ </td>
3163
+ <td>
3164
+ <div class="color-cell" style="background-color: lab(62.2542% 23.9633 48.4222);"
3165
+ data-bs-toggle="tooltip" data-bs-placement="top"
3166
+ title="lab(62.2542% 23.9633 48.4222)"></div>
3167
+ </td>
3168
+ <td>
3169
+ <div class="color-cell" style="background-color: oklab(0.6782 0.0573 0.1086);"
3170
+ data-bs-toggle="tooltip" data-bs-placement="top"
3171
+ title="oklab(0.6782 0.0573 0.1086)"></div>
3172
+ </td>
3173
+ <td>
3174
+ <div class="color-cell" style="background-color: hsl(30, 59%, 53%);"
3175
+ data-bs-toggle="tooltip" data-bs-placement="top"
3176
+ title="hsl(30, 59%, 53%)"></div>
3177
+ </td>
3178
+ <td>
3179
+ <div class="color-cell" style="background-color: hwb(30 25% 19%);"
3180
+ data-bs-toggle="tooltip" data-bs-placement="top"
3181
+ title="hwb(30 25% 19%)"></div>
3182
+ </td>
3183
+ <td>
3184
+ <div class="color-cell" style="background-color: rgb(207 135 64);"
3185
+ data-bs-toggle="tooltip" data-bs-placement="top"
3186
+ title="rgb(207 135 64)"></div>
3187
+ </td>
3188
+ <td>
3189
+ <div class="color-cell" style="background-color: #cf8740;"
3190
+ data-bs-toggle="tooltip" data-bs-placement="top"
3191
+ title="#cf8740"></div>
3192
+ </td>
3193
+ <td class="match-indicator off"
3194
+ data-bs-toggle="tooltip" data-bs-placement="top"
3195
+ title="RGB distance: 3.00">
3196
+
3197
+ </td>
3198
+ </tr>
3199
+
3200
+ <tr>
3201
+ <td>
3202
+ <div class="color-cell" style="background-color: #a0522d;"
3203
+ data-bs-toggle="tooltip" data-bs-placement="top"
3204
+ title="#a0522d"></div>
3205
+ <div class="small fw-bold mt-1">sienna</div>
3206
+ </td>
3207
+ <td>
3208
+ <div class="color-cell" style="background-color: lch(44.2764% 47.7287 49.616);"
3209
+ data-bs-toggle="tooltip" data-bs-placement="top"
3210
+ title="lch(44.2764% 47.7287 49.616)"></div>
3211
+ </td>
3212
+ <td>
3213
+ <div class="color-cell" style="background-color: lab(44.2764% 30.9237 36.3559);"
3214
+ data-bs-toggle="tooltip" data-bs-placement="top"
3215
+ title="lab(44.2764% 30.9237 36.3559)"></div>
3216
+ </td>
3217
+ <td>
3218
+ <div class="color-cell" style="background-color: oklab(0.5265 0.0820 0.0808);"
3219
+ data-bs-toggle="tooltip" data-bs-placement="top"
3220
+ title="oklab(0.5265 0.0820 0.0808)"></div>
3221
+ </td>
3222
+ <td>
3223
+ <div class="color-cell" style="background-color: hsl(19, 56%, 40%);"
3224
+ data-bs-toggle="tooltip" data-bs-placement="top"
3225
+ title="hsl(19, 56%, 40%)"></div>
3226
+ </td>
3227
+ <td>
3228
+ <div class="color-cell" style="background-color: hwb(19 18% 38%);"
3229
+ data-bs-toggle="tooltip" data-bs-placement="top"
3230
+ title="hwb(19 18% 38%)"></div>
3231
+ </td>
3232
+ <td>
3233
+ <div class="color-cell" style="background-color: rgb(158 81 46);"
3234
+ data-bs-toggle="tooltip" data-bs-placement="top"
3235
+ title="rgb(158 81 46)"></div>
3236
+ </td>
3237
+ <td>
3238
+ <div class="color-cell" style="background-color: #9e512e;"
3239
+ data-bs-toggle="tooltip" data-bs-placement="top"
3240
+ title="#9e512e"></div>
3241
+ </td>
3242
+ <td class="match-indicator off"
3243
+ data-bs-toggle="tooltip" data-bs-placement="top"
3244
+ title="RGB distance: 2.45">
3245
+
3246
+ </td>
3247
+ </tr>
3248
+
3249
+ <tr>
3250
+ <td>
3251
+ <div class="color-cell" style="background-color: #4682b4;"
3252
+ data-bs-toggle="tooltip" data-bs-placement="top"
3253
+ title="#4682b4"></div>
3254
+ <div class="small fw-bold mt-1">steelblue</div>
3255
+ </td>
3256
+ <td>
3257
+ <div class="color-cell" style="background-color: lch(51.9856% 33.8644 255.712);"
3258
+ data-bs-toggle="tooltip" data-bs-placement="top"
3259
+ title="lch(51.9856% 33.8644 255.712)"></div>
3260
+ </td>
3261
+ <td>
3262
+ <div class="color-cell" style="background-color: lab(51.9856% -8.3576 -32.8169);"
3263
+ data-bs-toggle="tooltip" data-bs-placement="top"
3264
+ title="lab(51.9856% -8.3576 -32.8169)"></div>
3265
+ </td>
3266
+ <td>
3267
+ <div class="color-cell" style="background-color: oklab(0.5880 -0.0408 -0.0906);"
3268
+ data-bs-toggle="tooltip" data-bs-placement="top"
3269
+ title="oklab(0.5880 -0.0408 -0.0906)"></div>
3270
+ </td>
3271
+ <td>
3272
+ <div class="color-cell" style="background-color: hsl(207, 44%, 49%);"
3273
+ data-bs-toggle="tooltip" data-bs-placement="top"
3274
+ title="hsl(207, 44%, 49%)"></div>
3275
+ </td>
3276
+ <td>
3277
+ <div class="color-cell" style="background-color: hwb(207 27% 29%);"
3278
+ data-bs-toggle="tooltip" data-bs-placement="top"
3279
+ title="hwb(207 27% 29%)"></div>
3280
+ </td>
3281
+ <td>
3282
+ <div class="color-cell" style="background-color: rgb(69 131 181);"
3283
+ data-bs-toggle="tooltip" data-bs-placement="top"
3284
+ title="rgb(69 131 181)"></div>
3285
+ </td>
3286
+ <td>
3287
+ <div class="color-cell" style="background-color: #4583b5;"
3288
+ data-bs-toggle="tooltip" data-bs-placement="top"
3289
+ title="#4583b5"></div>
3290
+ </td>
3291
+ <td class="match-indicator close"
3292
+ data-bs-toggle="tooltip" data-bs-placement="top"
3293
+ title="RGB distance: 1.73">
3294
+
3295
+ </td>
3296
+ </tr>
3297
+
3298
+ <tr>
3299
+ <td>
3300
+ <div class="color-cell" style="background-color: #87ceeb;"
3301
+ data-bs-toggle="tooltip" data-bs-placement="top"
3302
+ title="#87ceeb"></div>
3303
+ <div class="small fw-bold mt-1">skyblue</div>
3304
+ </td>
3305
+ <td>
3306
+ <div class="color-cell" style="background-color: lch(78.8520% 27.9519 231.160);"
3307
+ data-bs-toggle="tooltip" data-bs-placement="top"
3308
+ title="lch(78.8520% 27.9519 231.160)"></div>
3309
+ </td>
3310
+ <td>
3311
+ <div class="color-cell" style="background-color: lab(78.8520% -17.5300 -21.7717);"
3312
+ data-bs-toggle="tooltip" data-bs-placement="top"
3313
+ title="lab(78.8520% -17.5300 -21.7717)"></div>
3314
+ </td>
3315
+ <td>
3316
+ <div class="color-cell" style="background-color: oklab(0.8148 -0.0572 -0.0587);"
3317
+ data-bs-toggle="tooltip" data-bs-placement="top"
3318
+ title="oklab(0.8148 -0.0572 -0.0587)"></div>
3319
+ </td>
3320
+ <td>
3321
+ <div class="color-cell" style="background-color: hsl(197, 71%, 73%);"
3322
+ data-bs-toggle="tooltip" data-bs-placement="top"
3323
+ title="hsl(197, 71%, 73%)"></div>
3324
+ </td>
3325
+ <td>
3326
+ <div class="color-cell" style="background-color: hwb(197 54% 8%);"
3327
+ data-bs-toggle="tooltip" data-bs-placement="top"
3328
+ title="hwb(197 54% 8%)"></div>
3329
+ </td>
3330
+ <td>
3331
+ <div class="color-cell" style="background-color: rgb(138 207 235);"
3332
+ data-bs-toggle="tooltip" data-bs-placement="top"
3333
+ title="rgb(138 207 235)"></div>
3334
+ </td>
3335
+ <td>
3336
+ <div class="color-cell" style="background-color: #8acfeb;"
3337
+ data-bs-toggle="tooltip" data-bs-placement="top"
3338
+ title="#8acfeb"></div>
3339
+ </td>
3340
+ <td class="match-indicator off"
3341
+ data-bs-toggle="tooltip" data-bs-placement="top"
3342
+ title="RGB distance: 3.16">
3343
+
3344
+ </td>
3345
+ </tr>
3346
+
3347
+ <tr>
3348
+ <td>
3349
+ <div class="color-cell" style="background-color: #40e0d0;"
3350
+ data-bs-toggle="tooltip" data-bs-placement="top"
3351
+ title="#40e0d0"></div>
3352
+ <div class="small fw-bold mt-1">turquoise</div>
3353
+ </td>
3354
+ <td>
3355
+ <div class="color-cell" style="background-color: lch(80.9604% 45.3697 185.901);"
3356
+ data-bs-toggle="tooltip" data-bs-placement="top"
3357
+ title="lch(80.9604% 45.3697 185.901)"></div>
3358
+ </td>
3359
+ <td>
3360
+ <div class="color-cell" style="background-color: lab(80.9604% -45.1293 -4.6644);"
3361
+ data-bs-toggle="tooltip" data-bs-placement="top"
3362
+ title="lab(80.9604% -45.1293 -4.6644)"></div>
3363
+ </td>
3364
+ <td>
3365
+ <div class="color-cell" style="background-color: oklab(0.8223 -0.1302 -0.0116);"
3366
+ data-bs-toggle="tooltip" data-bs-placement="top"
3367
+ title="oklab(0.8223 -0.1302 -0.0116)"></div>
3368
+ </td>
3369
+ <td>
3370
+ <div class="color-cell" style="background-color: hsl(174, 72%, 56%);"
3371
+ data-bs-toggle="tooltip" data-bs-placement="top"
3372
+ title="hsl(174, 72%, 56%)"></div>
3373
+ </td>
3374
+ <td>
3375
+ <div class="color-cell" style="background-color: hwb(174 24% 12%);"
3376
+ data-bs-toggle="tooltip" data-bs-placement="top"
3377
+ title="hwb(174 24% 12%)"></div>
3378
+ </td>
3379
+ <td>
3380
+ <div class="color-cell" style="background-color: rgb(61 224 208);"
3381
+ data-bs-toggle="tooltip" data-bs-placement="top"
3382
+ title="rgb(61 224 208)"></div>
3383
+ </td>
3384
+ <td>
3385
+ <div class="color-cell" style="background-color: #3de0d0;"
3386
+ data-bs-toggle="tooltip" data-bs-placement="top"
3387
+ title="#3de0d0"></div>
3388
+ </td>
3389
+ <td class="match-indicator off"
3390
+ data-bs-toggle="tooltip" data-bs-placement="top"
3391
+ title="RGB distance: 3.00">
3392
+
3393
+ </td>
3394
+ </tr>
3395
+
3396
+ <tr>
3397
+ <td>
3398
+ <div class="color-cell" style="background-color: #da70d6;"
3399
+ data-bs-toggle="tooltip" data-bs-placement="top"
3400
+ title="#da70d6"></div>
3401
+ <div class="small fw-bold mt-1">orchid</div>
3402
+ </td>
3403
+ <td>
3404
+ <div class="color-cell" style="background-color: lch(62.7536% 62.5643 326.992);"
3405
+ data-bs-toggle="tooltip" data-bs-placement="top"
3406
+ title="lch(62.7536% 62.5643 326.992)"></div>
3407
+ </td>
3408
+ <td>
3409
+ <div class="color-cell" style="background-color: lab(62.7536% 52.4661 -34.0823);"
3410
+ data-bs-toggle="tooltip" data-bs-placement="top"
3411
+ title="lab(62.7536% 52.4661 -34.0823)"></div>
3412
+ </td>
3413
+ <td>
3414
+ <div class="color-cell" style="background-color: oklab(0.7021 0.1549 -0.0942);"
3415
+ data-bs-toggle="tooltip" data-bs-placement="top"
3416
+ title="oklab(0.7021 0.1549 -0.0942)"></div>
3417
+ </td>
3418
+ <td>
3419
+ <div class="color-cell" style="background-color: hsl(302, 59%, 65%);"
3420
+ data-bs-toggle="tooltip" data-bs-placement="top"
3421
+ title="hsl(302, 59%, 65%)"></div>
3422
+ </td>
3423
+ <td>
3424
+ <div class="color-cell" style="background-color: hwb(302 44% 15%);"
3425
+ data-bs-toggle="tooltip" data-bs-placement="top"
3426
+ title="hwb(302 44% 15%)"></div>
3427
+ </td>
3428
+ <td>
3429
+ <div class="color-cell" style="background-color: rgb(217 112 213);"
3430
+ data-bs-toggle="tooltip" data-bs-placement="top"
3431
+ title="rgb(217 112 213)"></div>
3432
+ </td>
3433
+ <td>
3434
+ <div class="color-cell" style="background-color: #d970d5;"
3435
+ data-bs-toggle="tooltip" data-bs-placement="top"
3436
+ title="#d970d5"></div>
3437
+ </td>
3438
+ <td class="match-indicator close"
3439
+ data-bs-toggle="tooltip" data-bs-placement="top"
3440
+ title="RGB distance: 1.41">
3441
+
3442
+ </td>
3443
+ </tr>
3444
+
3445
+ <tr>
3446
+ <td>
3447
+ <div class="color-cell" style="background-color: #dda0dd;"
3448
+ data-bs-toggle="tooltip" data-bs-placement="top"
3449
+ title="#dda0dd"></div>
3450
+ <div class="small fw-bold mt-1">plum</div>
3451
+ </td>
3452
+ <td>
3453
+ <div class="color-cell" style="background-color: lch(73.3325% 37.6034 324.616);"
3454
+ data-bs-toggle="tooltip" data-bs-placement="top"
3455
+ title="lch(73.3325% 37.6034 324.616)"></div>
3456
+ </td>
3457
+ <td>
3458
+ <div class="color-cell" style="background-color: lab(73.3325% 30.6576 -21.7744);"
3459
+ data-bs-toggle="tooltip" data-bs-placement="top"
3460
+ title="lab(73.3325% 30.6576 -21.7744)"></div>
3461
+ </td>
3462
+ <td>
3463
+ <div class="color-cell" style="background-color: oklab(0.7833 0.0899 -0.0594);"
3464
+ data-bs-toggle="tooltip" data-bs-placement="top"
3465
+ title="oklab(0.7833 0.0899 -0.0594)"></div>
3466
+ </td>
3467
+ <td>
3468
+ <div class="color-cell" style="background-color: hsl(300, 47%, 75%);"
3469
+ data-bs-toggle="tooltip" data-bs-placement="top"
3470
+ title="hsl(300, 47%, 75%)"></div>
3471
+ </td>
3472
+ <td>
3473
+ <div class="color-cell" style="background-color: hwb(300 63% 13%);"
3474
+ data-bs-toggle="tooltip" data-bs-placement="top"
3475
+ title="hwb(300 63% 13%)"></div>
3476
+ </td>
3477
+ <td>
3478
+ <div class="color-cell" style="background-color: rgb(222 161 222);"
3479
+ data-bs-toggle="tooltip" data-bs-placement="top"
3480
+ title="rgb(222 161 222)"></div>
3481
+ </td>
3482
+ <td>
3483
+ <div class="color-cell" style="background-color: #dea1de;"
3484
+ data-bs-toggle="tooltip" data-bs-placement="top"
3485
+ title="#dea1de"></div>
3486
+ </td>
3487
+ <td class="match-indicator close"
3488
+ data-bs-toggle="tooltip" data-bs-placement="top"
3489
+ title="RGB distance: 1.73">
3490
+
3491
+ </td>
3492
+ </tr>
3493
+
3494
+ <tr>
3495
+ <td>
3496
+ <div class="color-cell" style="background-color: #e6e6fa;"
3497
+ data-bs-toggle="tooltip" data-bs-placement="top"
3498
+ title="#e6e6fa"></div>
3499
+ <div class="small fw-bold mt-1">lavender</div>
3500
+ </td>
3501
+ <td>
3502
+ <div class="color-cell" style="background-color: lch(91.7423% 10.0953 286.045);"
3503
+ data-bs-toggle="tooltip" data-bs-placement="top"
3504
+ title="lch(91.7423% 10.0953 286.045)"></div>
3505
+ </td>
3506
+ <td>
3507
+ <div class="color-cell" style="background-color: lab(91.7423% 2.7902 -9.7020);"
3508
+ data-bs-toggle="tooltip" data-bs-placement="top"
3509
+ title="lab(91.7423% 2.7902 -9.7020)"></div>
3510
+ </td>
3511
+ <td>
3512
+ <div class="color-cell" style="background-color: oklab(0.9309 0.0074 -0.0259);"
3513
+ data-bs-toggle="tooltip" data-bs-placement="top"
3514
+ title="oklab(0.9309 0.0074 -0.0259)"></div>
3515
+ </td>
3516
+ <td>
3517
+ <div class="color-cell" style="background-color: hsl(240, 67%, 94%);"
3518
+ data-bs-toggle="tooltip" data-bs-placement="top"
3519
+ title="hsl(240, 67%, 94%)"></div>
3520
+ </td>
3521
+ <td>
3522
+ <div class="color-cell" style="background-color: hwb(240 90% 2%);"
3523
+ data-bs-toggle="tooltip" data-bs-placement="top"
3524
+ title="hwb(240 90% 2%)"></div>
3525
+ </td>
3526
+ <td>
3527
+ <div class="color-cell" style="background-color: rgb(230 230 250);"
3528
+ data-bs-toggle="tooltip" data-bs-placement="top"
3529
+ title="rgb(230 230 250)"></div>
3530
+ </td>
3531
+ <td>
3532
+ <div class="color-cell" style="background-color: #e6e6fa;"
3533
+ data-bs-toggle="tooltip" data-bs-placement="top"
3534
+ title="#e6e6fa"></div>
3535
+ </td>
3536
+ <td class="match-indicator perfect"
3537
+ data-bs-toggle="tooltip" data-bs-placement="top"
3538
+ title="RGB distance: 0.00">
3539
+
3540
+ </td>
3541
+ </tr>
3542
+
3543
+ </tbody>
3544
+ </table>
3545
+ </div>
3546
+ </div>
3547
+ </div>
3548
+
3549
+ <!-- Statistics -->
3550
+ <div class="mb-5">
3551
+ <h2 class="mb-3">Conversion Statistics</h2>
3552
+ <div class="row g-4">
3553
+ <div class="col-md-3">
3554
+ <div class="card text-center">
3555
+ <div class="card-body">
3556
+ <div class="stat-value">39</div>
3557
+ <div class="text-muted">Total Tests</div>
3558
+ </div>
3559
+ </div>
3560
+ </div>
3561
+ <div class="col-md-3">
3562
+ <div class="card text-center">
3563
+ <div class="card-body">
3564
+ <div class="stat-value">19</div>
3565
+ <div class="text-muted">Perfect Round-trips</div>
3566
+ </div>
3567
+ </div>
3568
+ </div>
3569
+ <div class="col-md-3">
3570
+ <div class="card text-center">
3571
+ <div class="card-body">
3572
+ <div class="stat-value">9</div>
3573
+ <div class="text-muted">Close Matches</div>
3574
+ </div>
3575
+ </div>
3576
+ </div>
3577
+ <div class="col-md-3">
3578
+ <div class="card text-center">
3579
+ <div class="card-body">
3580
+ <div class="stat-value">7</div>
3581
+ <div class="text-muted">Formats Tested</div>
3582
+ </div>
3583
+ </div>
3584
+ </div>
3585
+ </div>
3586
+ </div>
3587
+
3588
+ <footer class="text-center text-muted mt-5">
3589
+ Generated by Cataract Color Conversion Test Suite
3590
+ </footer>
3591
+ </div>
3592
+
3593
+ <!-- Bootstrap Bundle with Popper -->
3594
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
3595
+
3596
+ <!-- Initialize tooltips -->
3597
+ <script>
3598
+ // Enable all tooltips
3599
+ const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]');
3600
+ const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl));
3601
+ </script>
3602
+ </body>
3603
+ </html>