It’s interactive. It’s beautiful. It’s…a color palette you might create an image for, just…without the image part. And I’m quite proud of it, if you can’t tell.

So yours doesn’t have to be interactive, but I think it makes the fact that it’s not an image stand out even more.

Requirements

• Basic understanding of CSS & nested HTML
• “Edit CSS” option in WordPress appearance, or customizable child theme
• Ability to edit CSS & HTML part of posts/web page

It’s just a snippet, so it’s not required-required to have WordPress or other CMS, but I created this primarily to use for my blog, because #a11y.

HTML

<div class="color-palette">
	<div class="color-palette__swatch" style="background:#00a4a6">
		<div class="color-palette__label"><span>Wander Jane</span> #00a4a6</div>
	</div>
	<div class="color-palette__swatch" style="background:#f1f227">
		<div class="color-palette__label"><span>Lite Mustard</span> #f1f227</div>
	</div>
	<div class="color-palette__swatch" style="background:#00aa00">
		<div class="color-palette__label"><span>Ecovibes</span> #00aa00</div>
	</div>
	<div class="color-palette__swatch" style="background:#f08080">
		<div class="color-palette__label"><span>Coral Blush</span> #f08080</div>
	</div>
</div>

If using WordPress, <span> will be automatically edited out. To fix this, replace it with <strong>.

If you create a line break in the WordPress Text Editor, it will automatically add <br>, which will add an extra line of space between the color title (if you have one) and the HEX code.

CSS

Edit to your liking:

.color-palette{
	display:grid;
	grid-gap:0rem;
	grid-template-columns:repeat(4, 1fr);
	min-height:13rem;
	justify-content:center;
	margin:2rem auto;
	width:100%
}
.color-palette__swatch{
	align-items:flex-end;
	display:flex;
	min-height:13rem;
	justify-content:center;
	transition:transform .2s ease-out
}
.color-palette__swatch:hover{
	transform:scale(1.05)
}
.color-palette__label{
	background:rgba(255,255,255,.5);
	font-size:1.05rem;
	padding:1rem .5rem;
	text-align:center;
	width:100%
}
.dark .color-palette__label{
	background-color:rgb(23,25,25, 0.8)
}
.color-palette__label span,
.color-palette__label strong
/* keep one of these; you shouldn't need both!*/{
	display:block;
	font-weight:600;
	text-transform:uppercase
}

Cons

I don’t think it will show up in e-readers well, or at all. Depends highly on, like, everything. Also, I haven’t tried it yet.

It doesn’t work in Firefox’s browser reader, and probably more. But this doesn’t bug me, because if the reader has to view my website in the reader, then my blog design is a failure. I view websites in readers due to sites taking too long to load, having too many ads and/or distracting design. Ergo, I believe sites should be designed so well (that is, clutter-free) browser readers are unnecessary.

Use this, don’t use this. Whatever you do, don’t complain about my messy-ass code.

#LetsDiscuss is hosted by FYFA and ITAM.