Help Creating WordPress Shortcode - "Pantone" Swatch Boxes

I run a site at ColorWerx.net that displays the research I have done for the past 20+ years in collecting official color information for all sports teams throughout history. Pro and College.

This information is stored in a series of relational DBs...I store all the information I can for specific color sets (RGB, CMYK, Lab, Formula Ink mixes, etc.), and use it to cross-reference to databases for collegiate and pro franchises.

For a LONG time, the actual color information I've displayed has been in the form of running a report (admittedly, I'm still using MS Access. I know, I know.) and using SnagIt to grab an image to use as the display. Here's an example:


This example only displays Hex/HTML and RGB information; most teams and leagues don't want their specific Pantone information displayed on the site due to potential copyright issues, so I restrict what is displayed.

Obviously, this is a huge time-waster; I have wanted to replace this method for years.

Currently, my site uses WordPress; what I would like to do is to create a WP ShortCode that will allow me to display this information using generated swatch images utilizing CSS and PHP coding. However, I'm relatively new at this and am not exactly sure how to go about doing it.

I found a college branding site that uses CSS to create swatch boxes very similar to what I want to do:

UMass Amherst Brand Guide

I found the references to the 'pantone-box' elements within the CSS:

.pantone-box {
	border: 1px solid #cccccc;
	padding: 15px;
}

.pantone-color-881c1c {
	background-color: #881c1c;
	margin-bottom: 15px;
	height: 100px;
}

.pantone-color {
	margin-bottom: 15px;
	height: 100px;
}

.pantone-column {
	float: left;
	width: 15%;
	-webkit-box-sizing: border-box;
  	-moz-box-sizing: border-box;
  	box-sizing: border-box;
  	margin: 15px 13px 0 0;
}

.pantone-column-container {
	float: left;
	margin: 10px 0 30px 0;
}

.pantone-column .pantone-box {
	/*height: 260px;*/
	font-size: .825em;
}

/* adjust pantone color box sizing */
.pantone-column { width: 18%; }

.pantone-column .pantone-box { font-size: .7em; }

Select allOpen in new window

Here's a listing as to what I would like to do:

• Create a shortcode to give the ability to display color information within a box and also generate a color swatch based on RGB or Hex information.
• Allow customization to what elements are displayed; most of the time I will want to only display the color description (e.g., "Blue") plus the Hex value plus the RGB values (on separate lines), but will also want the flexibility to display Pantone information in place of - or in addition to - the color description.
• Have the ability to set the size of these boxes globally - ideally, I'd like them to have a fixed width and height.
• Provide a free-text field below an individual box. As you can see in the image example, I often will place informational text below the swatch box to indicate such things like whether or not the color is a metallic, a pastel, or sometimes some other type of info.

I don't know if this kind of project is something I should be hiring out for, or if it is something that some of the experts out there can just help point me in the right direction to get me started. I am open to all suggestions.

Please feel free to ask any questions, or for me to clear up any confusion that I probably have already created (!).

Thanks!