@ou-imdt/css/docs/OLDextra/palette.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

<style>
.swatch {
    display: inline-block;
    text-align: center;    
    display: inline-grid; 
    place-items: center;   
    width: 10ch; 
    aspect-ratio: 1; 
    padding: .2rem .3rem;
    margin:  .5rem;
    border-radius: .5rem;
}

.contrast-text {
--red: var(--r);
--green: var(--g);
--blue: var(--b);
 --luma: calc(
    (
      (
        (
          (var(--red) * 299) +
          (var(--green) * 587) +
          (var(--blue) * 114)
        ) / 1000
      ) - 128
    ) * -1000
  );
  --black-or-white: rgb( var(--luma),var(--luma),var(--luma) );
  --semi-b-or-w: rgba(var(--luma),var(--luma),var(--luma),0.5);
  --rgb: rgb(var(--red),var(--green),var(--blue));
  --rgba: rgba(var(--red),var(--green),var(--blue), 0.5);
  --not-rgb: rgb(calc(255 - var(--red)), calc(255 - var(--green)),calc(255 - var(--blue)));
  --not-rgba: rgb(calc(255 - var(--red)), calc(255 - var(--green)),calc(255 - var(--blue)), 0.4);
  
  color: rgb(var(--luma), var(--luma), var(--luma));
  background-color: rgb(var(--red), var(--green), var(--blue));
}

</style>

# Palette

## Neutrals

<span class="swatch contrast-text" style="--r: 0; --g: 0; --b: 0">#000000</span>
<span class="swatch contrast-text" style="--r: 255; --g: 255; --b: 255">#ffffff</span>
<span class="swatch contrast-text" style="--r: 49; --g: 43; --b: 57">#312b39</span>

## Primary Colours

<span class="swatch contrast-text" style="--r: 0; --g: 33; --b: 88">#002158</span>
<span class="swatch contrast-text" style="--r: 11; --g: 85; --b: 168">#0b55a8</span>
<span class="swatch contrast-text" style="--r: 216; --g: 231; --b: 246">#d8e7f6</span>
<span class="swatch contrast-text" style="--r: 255; --g: 194; --b: 61">#ffc23d</span>

## Secondary Colours

<span class="swatch contrast-text" style="--r: 58; --g: 177; --b: 206">#3ab1ce</span>
<span class="swatch contrast-text" style="--r: 124; --g: 199; --b: 224">#7cc7e0</span>
<span class="swatch contrast-text" style="--r: 191; --g: 226; --b: 239">#bfe2ef</span>
<span class="swatch contrast-text" style="--r: 221; --g: 240; --b: 248">#ddf0f8</span>
<span class="swatch contrast-text" style="--r: 104; --g: 164; --b: 212">#68a4d4</span>
<span class="swatch contrast-text" style="--r: 196; --g: 218; --b: 240">#c4daf0</span>
<span class="swatch contrast-text" style="--r: 231; --g: 239; --b: 247">#e7eff7</span>
<span class="swatch contrast-text" style="--r: 19; --g: 133; --b: 117">#138575</span>
<span class="swatch contrast-text" style="--r: 155; --g: 207; --b: 200">#9bcfc8</span>
<span class="swatch contrast-text" style="--r: 131; --g: 40; --b: 132">#832884</span>
<span class="swatch contrast-text" style="--r: 230; --g: 211; --b: 230">#e6d3e6</span>
<span class="swatch contrast-text" style="--r: 70; --g: 69; --b: 66">#464542</span>
<span class="swatch contrast-text" style="--r: 103; --g: 100; --b: 99">#676463</span>
<span class="swatch contrast-text" style="--r: 212; --g: 210; --b: 210">#d4d2d2</span>
<span class="swatch contrast-text" style="--r: 240; --g: 240; --b: 241">#f0f0f1</span>

## Tertiary Colours

<span class="swatch contrast-text" style="--r: 176; --g: 223; --b: 235">#b0dfeb</span>
<span class="swatch contrast-text" style="--r: 221; --g: 239; --b: 248">#ddeff8</span>
<span class="swatch contrast-text" style="--r: 231; --g: 244; --b: 250">#e7f4fa</span>
<span class="swatch contrast-text" style="--r: 241; --g: 248; --b: 252">#f1f8fc</span>
<span class="swatch contrast-text" style="--r: 244; --g: 250; --b: 252">#f4fafc</span>
<span class="swatch contrast-text" style="--r: 196; --g: 218; --b: 240">#c4daf0</span>
<span class="swatch contrast-text" style="--r: 231; --g: 239; --b: 247">#e7eff7</span>
<span class="swatch contrast-text" style="--r: 237; --g: 236; --b: 224">#edece0</span>
<span class="swatch contrast-text" style="--r: 250; --g: 249; --b: 244">#faf9f4</span>
<span class="swatch contrast-text" style="--r: 233; --g: 232; --b: 232">#e9e8e8</span>
<span class="swatch contrast-text" style="--r: 246; --g: 246; --b: 246">#f6f6f6</span>