<h1>Color Palette Using CSS Grid</h1>
<div class="grid-container">
	<!-- Row 1 -->
	<div class="cell grid-container card color-1">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Maximum Green</div>
				<div class="color-hex">#679436</div>
				<div class="color-rgb">rgb(92,137,48)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	<div class="cell grid-container card color-2">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Limerick</div>
				<div class="color-hex">#A5BE00</div>
				<div class="color-rgb">rgb(155,181,0)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	<div class="cell grid-container card color-3">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Sea Blue</div>
				<div class="color-hex">#05668D</div>
				<div class="color-rgb">rgb(7,91,130)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	
	<!-- Row 2 -->
	<div class="cell grid-container card color-4">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Queen Blue</div>
				<div class="color-hex">#427AA1</div>
				<div class="color-rgb">rgb(57,111,151)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	<div class="cell grid-container card color-5">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Anti-Flash White</div>
				<div class="color-hex">#EBF2FA</div>
				<div class="color-rgb">rgb(235,242,250)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	<div class="cell grid-container card color-6">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Info</div>
				<div class="color-hex">#3498db</div>
				<div class="color-rgb">rgb(52,152,219)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	
	<!-- Row 3 -->
	<div class="cell grid-container card color-7">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Success</div>
				<div class="color-hex">#2ecc71</div>
				<div class="color-rgb">rgb(216,51,74)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	<div class="cell grid-container card color-8">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Warning</div>
				<div class="color-hex">#f1c40f</div>
				<div class="color-rgb">rgb(241,196,15)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
	<div class="cell grid-container card color-9">
		<div class="cell"></div>
		<div class="cell"></div>
		<div class="cell">
			<div class="info">
				<div class="color-name">Danger</div>
				<div class="color-hex">#e74c3c</div>
				<div class="color-rgb">rgb(231,76,60)</div>
			</div>
			<button>
				<i class="material-icons">file_copy</i>
			</button>
		</div>
	</div>
</div>
$base-duration: 250ms;

// Colors
$color-1: #679436;
$color-2: #A5BE00;
$color-3: #05668D;
$color-4: #427AA1;
$color-5: #EBF2FA;
$color-6: #3498db;
$color-7: #2ecc71;
$color-8: #f1c40f;
$color-9: #e74c3c;

$black: #222;
$white: whitesmoke;
$darkgray: #666;

// Breakpoints
$sm: 20rem;
$med: 48rem;
$lg: 64rem;

*, *:before, *:after {
	box-sizing: border-box;
	outline: none;
}

html {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	font-smooth: auto;
	font-weight: 300;
	line-height: 1.5;
	color: #444;
}

body {
	position: relative;
	// display: flex;
	// align-items: center;
	// justify-content: center;
	// width: 100%;
	// height: 100vh;
	padding: 20px;
	background-image: url('https://www.toptal.com/designers/subtlepatterns/patterns/geometry2.png');
}

button {
	cursor: pointer;
}

h1 {
	text-align: center;
}

.grid-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(25%, 1fr));
	grid-gap: 20px;
	width: 80%;
	margin: 0 auto;
	//color: #444;
	.cell {
		width: 100%;
		border-radius: 5px;
		overflow: hidden;
		color: #fff;
	}
	.card {
		display: grid;
		grid-gap: 0;
		box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
		transition: all 0.3s cubic-bezier(.25,.8,.25,1);
		&:hover {
			box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
		}
		> .cell {
			position: relative;
			display: flex;
			border-radius: 0;
			align-items: center;
			justify-content: space-between;
			&:nth-of-type(1) {
				grid-column: 1;
				grid-row: 1;
				height: 150px;
				&:hover {
					&:before {
						position: absolute;
						content: 'normal';
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;
						color: rgba($black,0.4);
						font-size: 13px;
						font-weight: 700;
						text-transform: uppercase;
					}
				}
			}
			&:nth-of-type(2) {
				grid-column: 2;
				grid-row: 1;
				height: 150px;
				&:hover {
					&:before {
						position: absolute;
						content: 'light';
						display: flex;
						align-items: center;
						justify-content: center;
						width: 100%;
						height: 100%;
						color: rgba($black,0.4);
						font-size: 13px;
						font-weight: 700;
						text-transform: uppercase;
					}
				}
			}
			&:nth-of-type(3) {
				grid-column: 1 / 3;
				grid-row: 2;
				padding: 20px;
				background-color: darken($darkgray,10%);
			}
			button {
				position: relative;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 40px;
				height: 40px;
				background-color: transparent;
				border: 2px solid rgba($white,0.4);
				border-radius: 50%;
				color: rgba($white,0.4);
				transition: 0.25s;
				&:hover {
					border: 2px solid rgba($white,1);
					color: rgba($white,1);
				}
				i {
					font-size: 16px;
				}
			}
		}
		&.color-1 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-1;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-1,5%);
				}
			}
		}
		&.color-2 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-2;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-2,5%);
				}
			}
		}
		&.color-3 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-3;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-3,5%);
				}
			}
		}
		&.color-4 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-4;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-4,5%);
				}
			}
		}
		&.color-5 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-5;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-5,5%);
				}
			}
		}
		&.color-6 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-6;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-6,5%);
				}
			}
		}
		&.color-7 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-7;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-7,5%);
				}
			}
		}
		&.color-8 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-8;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-8,5%);
				}
			}
		}
		&.color-9 {
			.cell {
				&:nth-of-type(1) {
					background-color: $color-9;
				}
				&:nth-of-type(2) {
					background-color: lighten($color-9,5%);
				}
			}
		}
	}
	.color-name {
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.03125rem;
		text-transform: uppercase;
	}
	.color-hex,
	.color-rgb {
		font-size: 12px;
	}
}

View Compiled

External CSS

  1. https://fonts.googleapis.com/icon?family=Material+Icons

External JavaScript

This Pen doesn't use any external JavaScript resources.