Add SVG color swatches to palette in README

Replaces plain color codes in the color palette section with inline SVG circles for visual reference, improving clarity for contributors selecting flag colors.
This commit is contained in:
HatScripts 2025-12-11 22:27:57 +11:00
parent 45207c1337
commit bc36c9ad7f

View file

@ -66,23 +66,23 @@ Then commit the changes, and submit them as a pull request.
Submitted flags should conform to the following color palette.<br/> Try to match the flag's original colors with the nearest color from the palette.
- `#eeeeee`: white
- `#acabb1`: gray
- `#333333`: black
- `#a2001d`: dark red
- `#d80027`: red
- `#ff9811`: orange
- `#ffda44`: yellow
- `#6da544`: green
- `#496e2d`: dark green
- `#338af3`: light blue
- `#0052b4`: blue
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#eeeeee"></svg> `#eeeeee`: white
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#acabb1"></svg> `#acabb1`: gray
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#333333"></svg> `#333333`: black
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#a2001d"></svg> `#a2001d`: dark red
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#d80027"></svg> `#d80027`: red
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#ff9811"></svg> `#ff9811`: orange
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#ffda44"></svg> `#ffda44`: yellow
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#6da544"></svg> `#6da544`: green
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#496e2d"></svg> `#496e2d`: dark green
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#338af3"></svg> `#338af3`: light blue
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#0052b4"></svg> `#0052b4`: blue
Special cases:
- `#002266`: dark blue (only two usages: [<img src="https://hatscripts.github.io/circle-flags/flags/td.svg" width="16"> Chad](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/td.svg), to differentiate from [<img src="https://hatscripts.github.io/circle-flags/flags/ro.svg" width="16"> Romania](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/ro.svg); and [<img src="https://hatscripts.github.io/circle-flags/flags/aq-true_south.svg" width="16"> True South (Antarctica)](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/aq-true_south.svg))
- `#4a1f63`: purple (only one usage: [<img src="https://hatscripts.github.io/circle-flags/flags/es-ib.svg" width="16"> Balearic Islands](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/es-ib.svg))
- `#751a46`: dark pink (only one usage: [<img src="https://hatscripts.github.io/circle-flags/flags/qa.svg" width="16"> Qatar](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/qa.svg))
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#002266"></svg> `#002266`: dark blue (only two usages: [<img src="https://hatscripts.github.io/circle-flags/flags/td.svg" width="16"> Chad](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/td.svg), to differentiate from [<img src="https://hatscripts.github.io/circle-flags/flags/ro.svg" width="16"> Romania](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/ro.svg); and [<img src="https://hatscripts.github.io/circle-flags/flags/aq-true_south.svg" width="16"> True South (Antarctica)](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/aq-true_south.svg))
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#4a1f63"></svg> `#4a1f63`: purple (only one usage: [<img src="https://hatscripts.github.io/circle-flags/flags/es-ib.svg" width="16"> Balearic Islands](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/es-ib.svg))
- <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 2 2"><circle cx="1" cy="1" r="1" fill="#751a46"></svg> `#751a46`: dark pink (only one usage: [<img src="https://hatscripts.github.io/circle-flags/flags/qa.svg" width="16"> Qatar](https://github.com/HatScripts/circle-flags/blob/gh-pages/flags/qa.svg))
## License