Pinecone

Colors 

<style>
    .colors {
        width: 100%;
    }

    .colors h1 {
        text-align: center;
    }

    .group+.group {
        margin-top: 1.5rem;
    }

    .color {
        align-items: center;
        border-radius: 50%;
        display: inline-flex;
        height: 0;
        justify-content: center;
        margin-right: 0;
        margin-bottom: 5rem;
        padding-top: 100%;
        position: relative;
        width: 100%;
    }

    .contrast {
        font-family: "Noto Sans", sans-serif;
        text-transform: uppercase;
        margin-top: -100%;
    }

    .caption {
        color: black;
        font-family: "Noto Sans", sans-serif;
        font-size: 0.75rem;
        position: absolute;
        bottom: -3rem;
    }

    .caption strong {
        text-transform: capitalize;
    }

    @media screen and (min-width: 37.5rem) {
        .colors h1 {
            text-align: left;
        }

        .palette {
            display: grid;
            column-gap: 1.5rem;
            grid-template-columns: repeat(4, 1fr);
        }
</style>
<div class="colors">
    <div class="group group--brand">
        <h1>Brand</h1>
        <div class="palette">
            <div class="color has-blue-500-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 500</strong><br />
                    #16605d
                </p>
            </div>
        </div>
    </div>
    <div class="group group--blues">
        <h1>Blues</h1>
        <div class="palette">
            <div class="color has-blue-700-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 700</strong><br />
                    #1c4342
                </p>
            </div>
            <div class="color has-blue-600-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 600</strong><br />
                    #18514f
                </p>
            </div>
            <div class="color has-blue-400-background-color">
                <span class="contrast">aa</span>
                <p class="caption">
                    <strong>blue 400</strong><br />
                    #1d7c79
                </p>
            </div>
            <div class="color has-blue-300-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 300</strong><br />
                    #30cfc9
                </p>
            </div>
            <div class="color has-blue-200-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 200</strong><br />
                    #c5fdf9
                </p>
            </div>
            <div class="color has-blue-150-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 150</strong><br />
                    #c5d1ce
                </p>
            </div>
            <div class="color has-blue-100-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 100</strong><br />
                    #edf5f3
                </p>
            </div>
            <div class="color has-blue-50-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>blue 50</strong><br />
                    #e3eae8
                </p>
            </div>
        </div>
    </div>
    <div class="group group--greens">
        <h1>Greens</h1>
        <div class="palette">
            <div class="color has-green-500-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>green 500</strong><br />
                    #076431
                </p>
            </div>
            <div class="color has-green-400-background-color">
                <span class="contrast">aa</span>
                <p class="caption">
                    <strong>green 400</strong><br />
                    #0b8441
                </p>
            </div>
            <div class="color has-green-300-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>green 300</strong><br />
                    #45d385
                </p>
            </div>
            <div class="color has-green-200-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>green 200</strong><br />
                    #c9f8db
                </p>
            </div>
        </div>
    </div>
    <div class="group group--reds">
        <h1>Reds</h1>
        <div class="palette">
            <div class="color has-red-500-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>red 500</strong><br />
                    #973102
                </p>
            </div>
            <div class="color has-red-400-background-color">
                <span class="contrast">aa</span>
                <p class="caption">
                    <strong>red 400</strong><br />
                    #ff621a
                </p>
            </div>
            <div class="color has-red-300-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>red 300</strong><br />
                    #ffa47a
                </p>
            </div>
            <div class="color has-red-200-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>red 200</strong><br />
                    #fdc2a7
                </p>
            </div>
        </div>
    </div>
    <div class="group group--yellows">
        <h1>Yellows</h1>
        <div class="palette">
            <div class="color has-yellow-600-background-color">
                <span class="contrast">aa</span>
                <p class="caption">
                    <strong>yellow 600</strong><br />
                    #e8aa00
                </p>
            </div>
            <div class="color has-yellow-500-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>yellow 500</strong><br />
                    #face00
                </p>
            </div>
            <div class="color has-yellow-400-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>yellow 400</strong><br />
                    #fceeb0
                </p>
            </div>
        </div>
    </div>
    <div class="group group--shades">
        <h1>Shades</h1>
        <div class="palette">
            <div class="color has-black-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>black</strong><br />
                    #000
                </p>
            </div>
            <div class="color has-dark-mint-500-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>dark mint 500</strong><br />
                    #203131
                </p>
            </div>
            <div class="color has-dark-mint-400-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>dark mint 400</strong><br />
                    #294040
                </p>
            </div>
            <div class="color has-grey-500-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>grey 500</strong><br />
                    #585850
                </p>
            </div>
            <div class="color has-grey-400-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>grey 400</strong><br />
                    #b2b2a7
                </p>
            </div>
            <div class="color has-grey-300-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>grey 300</strong><br />
                    #d5d5cf
                </p>
            </div>
            <div class="color has-grey-200-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>grey 200</strong><br />
                    #f0efef
                </p>
            </div>
            <div class="color has-off-white-background-color">
                <span class="contrast">aaa</span>
                <p class="caption">
                    <strong>off white</strong><br />
                    #f9f9f7
                </p>
            </div>
        </div>
    </div>
</div>
 
<style>
	.colors {
		width: 100%;
	}

	.colors h1 {
		text-align: center;
	}

	.group + .group {
		margin-top: 1.5rem;
	}

	.color {
		align-items: center;
		border-radius: 50%;
		display: inline-flex;
		height: 0;
		justify-content: center;
		margin-right: 0;
		margin-bottom: 5rem;
		padding-top: 100%;
		position: relative;
		width: 100%;
	}

	.contrast {
		font-family: "Noto Sans", sans-serif;
		text-transform: uppercase;
		margin-top: -100%;
	}

	.caption {
		color: black;
		font-family: "Noto Sans", sans-serif;
		font-size: 0.75rem;
		position: absolute;
		bottom: -3rem;
	}

	.caption strong {
		text-transform: capitalize;
	}

	@media screen and (min-width: 37.5rem) {
		.colors h1 {
			text-align: left;
		}

		.palette {
			display: grid;
			column-gap: 1.5rem;
			grid-template-columns: repeat(4, 1fr);
		}
</style>
<div class="colors">
	{% set colorGroups = [
		'brand',
		'blues',
		'greens',
		'reds',
		'yellows',
		'shades'
	] %}
	{% for key in colorGroups %}
		<div class="group group--{{ key }}">
			<h1>{{ key | capitalize }}</h1>
			<div class="palette">
				{% for this in colors[key] %}
					<div class="color has-{{ this.color }}-background-color">
						<span class="contrast">{{ this.contrast }}</span>
						<p class="caption">
							<strong>{{ this.color | replace("-", " ") }}</strong><br/>
							{{ this.hex }}
						</p>
					</div>
				{% endfor %}
			</div>
		</div>
	{% endfor %}
</div>
 
{
  "colors": {
    "brand": [
      {
        "color": "blue-500",
        "contrast": "aaa",
        "hex": "#16605d"
      }
    ],
    "blues": [
      {
        "color": "blue-700",
        "contrast": "aaa",
        "hex": "#1c4342"
      },
      {
        "color": "blue-600",
        "contrast": "aaa",
        "hex": "#18514f"
      },
      {
        "color": "blue-400",
        "contrast": "aa",
        "hex": "#1d7c79"
      },
      {
        "color": "blue-300",
        "contrast": "aaa",
        "hex": "#30cfc9"
      },
      {
        "color": "blue-200",
        "contrast": "aaa",
        "hex": "#c5fdf9"
      },
      {
        "color": "blue-150",
        "contrast": "aaa",
        "hex": "#c5d1ce"
      },
      {
        "color": "blue-100",
        "contrast": "aaa",
        "hex": "#edf5f3"
      },
      {
        "color": "blue-50",
        "contrast": "aaa",
        "hex": "#e3eae8"
      }
    ],
    "greens": [
      {
        "color": "green-500",
        "contrast": "aaa",
        "hex": "#076431"
      },
      {
        "color": "green-400",
        "contrast": "aa",
        "hex": "#0b8441"
      },
      {
        "color": "green-300",
        "contrast": "aaa",
        "hex": "#45d385"
      },
      {
        "color": "green-200",
        "contrast": "aaa",
        "hex": "#c9f8db"
      }
    ],
    "reds": [
      {
        "color": "red-500",
        "contrast": "aaa",
        "hex": "#973102"
      },
      {
        "color": "red-400",
        "contrast": "aa",
        "hex": "#ff621a"
      },
      {
        "color": "red-300",
        "contrast": "aaa",
        "hex": "#ffa47a"
      },
      {
        "color": "red-200",
        "contrast": "aaa",
        "hex": "#fdc2a7"
      }
    ],
    "yellows": [
      {
        "color": "yellow-600",
        "contrast": "aa",
        "hex": "#e8aa00"
      },
      {
        "color": "yellow-500",
        "contrast": "aaa",
        "hex": "#face00"
      },
      {
        "color": "yellow-400",
        "contrast": "aaa",
        "hex": "#fceeb0"
      }
    ],
    "shades": [
      {
        "color": "black",
        "contrast": "aaa",
        "hex": "#000"
      },
      {
        "color": "dark-mint-500",
        "contrast": "aaa",
        "hex": "#203131"
      },
      {
        "color": "dark-mint-400",
        "contrast": "aaa",
        "hex": "#294040"
      },
      {
        "color": "grey-500",
        "contrast": "aaa",
        "hex": "#585850"
      },
      {
        "color": "grey-400",
        "contrast": "aaa",
        "hex": "#b2b2a7"
      },
      {
        "color": "grey-300",
        "contrast": "aaa",
        "hex": "#d5d5cf"
      },
      {
        "color": "grey-200",
        "contrast": "aaa",
        "hex": "#f0efef"
      },
      {
        "color": "off-white",
        "contrast": "aaa",
        "hex": "#f9f9f7"
      }
    ]
  }
}

There are no notes for this item.