Preview CSS Color

[joshdavenport]

Open preview-css-color in Script Kit

// Name: Preview CSS Color
// Description: Preview any CSS color accepted by background-color
// Author: Josh Davenport-Smith
// Twitter: @joshdprts

import "@johnlindquist/kit";

const color = await arg("Color");

await div(`
  <div class="pt-2 h-full w-full">
    <div class="checker h-full w-full">
      <div style="background-color: ${color}" class="h-full w-full flex items-start">
        <div class="bg-white">
          <div style="background-color: ${color}" class="p-2">
            <div style="color: ${color}; filter: invert(100%); text-shadow: 0 0 1px hsla(0, 0%, 100%, 0.2)" class="w-fit text-xs">${color}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <style type="text/css">
    .checker {
      background-color: #fff;
      background-size: 24px 24px;
      background-position: 0 0, 12px 12px;
      background-image: linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef), linear-gradient(45deg, #efefef 25%, transparent 25%, transparent 75%, #efefef 75%, #efefef);
    }
  </style>
`);