Skip to content

How to display color palettes with πŸ’― CSS

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.

Wander Jane #00a4a6
Dark Grey #333
Coral Blush #f08080
Light Grey #888

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.

Leave a Reply to Gayathri Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

1 Response

Author’s gravatar

Whoa that is a very useful post. I am a newbie to CSS and coding in general, but this tutorial is definitely useful!

Reply »