6 Color Palette Displays!

[tesscodes]

Information

Hey guys! This month's mostly going to be about profile codes, but just in case the code generator drags into January, here's a big set of color palette displays for your IC or OOC needs. These are super easy to add into existing codes, so have fun mixing and matching! Enjoy! ♥

Coding: Color Block

<lj-raw><div style="max-width:400px;height:40px;margin:0 auto;display:flex;"> <!-- SET EACH PERCENTAGE SO THAT THE TOTAL COMES OUT TO 100% ADD/REMOVE DIVS AS NEEDED! --> <div style="width:20%;background:#333;"></div> <div style="width:20%;background:#444;"></div> <div style="width:20%;background:#555;"></div> <div style="width:20%;background:#666;"></div> <div style="width:20%;background:#777;"></div> </div></lj-raw>

#939AA0

#D2913F

#8A612B

#4C3D36

#3B4141

Coding: Neat Rectangles

<lj-raw><div style="width:500px;height:30px;margin:0 auto;display:flex;font-family:monospace;font-size:11px;letter-spacing:1px;line-height:30px;text-align:center;color:#fff;"> <!-- REMOVE COLOR BLOCK MARGINS & BORDER RADIUS TO SIT FLUSH --> <div style="width:20%;background:#333;margin:0 2px;border-radius:8px;">#333</div> <div style="width:20%;background:#444;margin:0 2px;border-radius:8px;">#444</div> <div style="width:20%;background:#555;margin:0 2px;border-radius:8px;">#555</div> <div style="width:20%;background:#666;margin:0 2px;border-radius:8px;">#666</div> <div style="width:20%;background:#777;margin:0 2px;border-radius:8px;">#777</div> </div></lj-raw>

#B2DEC7

#84C3B0

#42BA9F

#007C7A

#203935

Coding: Color Swatch

<lj-raw><div style="display:flex;justify-content:center;font-family:monospace;font-size:11px;letter-spacing:1px;text-align:center;color:#111;"> <!-- ADD/REMOVE DIVS AS NEEDED! --> <div style="width:80px;margin:0 5px;"> <div style="background:#333;height:80px;"></div> <div style="background:#fff;padding:5px 0;border:1px solid #ddd;border-top:none;">#333</div> </div> <div style="width:80px;margin:0 5px;"> <div style="background:#444;height:80px;"></div> <div style="background:#fff;padding:5px 0;border:1px solid #ddd;border-top:none;">#444</div> </div> <div style="width:80px;margin:0 5px;"> <div style="background:#555;height:80px;"></div> <div style="background:#fff;padding:5px 0;border:1px solid #ddd;border-top:none;">#555</div> </div> <div style="width:80px;margin:0 5px;"> <div style="background:#666;height:80px;"></div> <div style="background:#fff;padding:5px 0;border:1px solid #ddd;border-top:none;">#666</div> </div> <div style="width:80px;margin:0 5px;"> <div style="background:#777;height:80px;"></div> <div style="background:#fff;padding:5px 0;border:1px solid #ddd;border-top:none;">#777</div> </div> </div></lj-raw>

Coding: Overlapping Circles #1

<lj-raw><div style="max-width:400px;margin:0 auto;display:flex;justify-content:center;"> <!-- ADD/REMOVE DIVS AS NEEDED! --> <div style="background:#333;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#444;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#555;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#666;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#777;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> </div></lj-raw>

Coding: Overlapping Circles #2

<lj-raw><div style="max-width:400px;margin:0 auto;display:flex;justify-content:center;"> <!-- ADD/REMOVE DIVS AS NEEDED! --> <div style="background:#333;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#444;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#555;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#666;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> <div style="background:#777;border:3px solid #fff;box-shadow:0 0 0 1px #ccc;width:40px;height:40px;border-radius:100%;margin:0 -5px;"></div> </div></lj-raw>

#D7D2CE

#BDB09F

#708777

#8F5D56

#6E4235

Coding: Circular Display

<lj-raw><div style="display:flex;justify-content:center;font-family:monospace;font-size:11px;letter-spacing:1px;text-align:center;color:#111;"> <!-- ADD/REMOVE DIVS AS NEEDED! --> <div style="width:90px;margin:0 5px;"> <div style="background:#333;height:90px;border-radius:100%;margin:0 0 10px 0;"></div> #333 </div> <div style="width:90px;margin:0 5px;"> <div style="background:#444;height:90px;border-radius:100%;margin:0 0 10px 0;"></div> #444 </div> <div style="width:90px;margin:0 5px;"> <div style="background:#555;height:90px;border-radius:100%;margin:0 0 10px 0;"></div> #555 </div> <div style="width:90px;margin:0 5px;"> <div style="background:#666;height:90px;border-radius:100%;margin:0 0 10px 0;"></div> #666 </div> <div style="width:90px;margin:0 5px;"> <div style="background:#777;height:90px;border-radius:100%;margin:0 0 10px 0;"></div> #777 </div> </div></lj-raw>

Editing Guide

Paste the coding into Notepad or similar and bring up Replace All (usually Ctrl+H) to replace values quickly and easily!

FONTS

monospace - All text in codes that have HEX codes displayed

COLORS

#fff

Text in Neat Rectangles, HEX label background in Color Swatch, inner border in Overlapping Circles #2

#ccc

Borders on Color Swatch and Overlapping Circles #2

#777

Fifth color

#666

Fourth color

#555

Third color

#444

Second color

#333

First color

#111

Text in Color Swatch and Circular Display

Terms of Use

♡ Do not remove credit.
♡ Do not redistribute my codes in part or in whole (posting a copy for players to use in your game is fine with a link to original post.)
♡ If you break something during editing, please feel free to drop me a comment and I'll help as best I can!
♡ I love seeing edits! This isn't a rule, but if you have a cool edit of one of my codes I'd love to see it!