From 1f0cda5c3fd8f61a9245ed5ea7a87160dcc0c339 Mon Sep 17 00:00:00 2001
From: HatScripts <nxhlms@gmail.com>
Date: Fri, 12 Dec 2025 12:36:35 +1100
Subject: [PATCH] Update color palette icons in README

Inline SVG color circles weren't displaying, so we have replaced them with external `placeholder.pics` image icons.
---
 README.md | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 480f01e..a3189b1 100644
--- a/README.md
+++ b/README.md
@@ -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.
 
-- <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
+- <img src="https://placeholder.pics/svg/16x16/eeeeee/eeeeee"/> `#eeeeee`: white
+- <img src="https://placeholder.pics/svg/16x16/acabb1/acabb1"/> `#acabb1`: gray
+- <img src="https://placeholder.pics/svg/16x16/333333/333333"/> `#333333`: black
+- <img src="https://placeholder.pics/svg/16x16/a2001d/a2001d"/> `#a2001d`: dark red
+- <img src="https://placeholder.pics/svg/16x16/d80027/d80027"/> `#d80027`: red
+- <img src="https://placeholder.pics/svg/16x16/ff9811/ff9811"/> `#ff9811`: orange
+- <img src="https://placeholder.pics/svg/16x16/ffda44/ffda44"/> `#ffda44`: yellow
+- <img src="https://placeholder.pics/svg/16x16/6da544/6da544"/> `#6da544`: green
+- <img src="https://placeholder.pics/svg/16x16/496e2d/496e2d"/> `#496e2d`: dark green
+- <img src="https://placeholder.pics/svg/16x16/338af3/338af3"/> `#338af3`: light blue
+- <img src="https://placeholder.pics/svg/16x16/0052b4/0052b4"/> `#0052b4`: blue
 
 Special cases:
 
-- <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))
+- <img src="https://placeholder.pics/svg/16x16/002266/002266"> `#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))
+- <img src="https://placeholder.pics/svg/16x16/4a1f63/4a1f63"> `#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))
+- <img src="https://placeholder.pics/svg/16x16/751a46/751a46"> `#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