Update 3.1.3: Removes the issue with Safari popup positioning, and adds the copy transparencies feature.

How to use the Color Matrix

  • Browse palettes: Each column is a color family (Primary, Secondary, Neutral, etc.). Each card is a stop (ultra-light → ultra-dark).
  • Copy an OKLCH value: Click the OKLCH value on a card to copy only the oklch(…) string to your clipboard. You’ll see a quick “Copied” toast confirmation.
  • See transparency steps: Click the palette icon on a card to open a popover showing ready-to-use transparency steps for that token (using color-mix(in oklch, var(–token) …, transparent)).
  • Close the popover: Press Esc, click the X, or click outside the popover to close it.
  • Accessibility note: Text colors are automatically chosen (black/white) to meet the APCA minimum. The “Copied” toast always stays the same style for consistency.
  • Just add the code to your snippet manager of choice (e.g., wpCodeBox) or your functions.php.
  • Note: You cannot be using the ACSS inline tokens, as this is looking for the CSS file.
Check it out live!
no sound
<?php
/**
 * Shortcode: [acss_colors] v3.1.3
 *
 * Reads ACSS variables directly from:
 *   wp-content/uploads/automatic-css/automatic.css
 */

add_shortcode("acss_colors", function ($atts = []) {
    $atts = shortcode_atts(
        [
            "prefixes" =>
                "primary,secondary,tertiary,accent,base,neutral,danger,warning,info,success",
            "mono" => "false",
            "debug" => "false",
        ],
        $atts,
        "acss_colors"
    );

    $prefixes = array_values(
        array_filter(
            array_map("trim", explode(",", strtolower($atts["prefixes"])))
        )
    );

    $include_mono = in_array(
        strtolower(trim($atts["mono"])),
        ["1", "true", "yes", "on"],
        true
    );

    $debug = in_array(
        strtolower(trim($atts["debug"])),
        ["1", "true", "yes", "on"],
        true
    );

    $uid = "acss-matrix-" . wp_generate_uuid4();

    $uploads = wp_upload_dir(null, false);
    $acss_dir = trailingslashit($uploads["basedir"]) . "automatic-css/";
    $acss_file = $acss_dir . "automatic.css";

    if (!is_readable($acss_file)) {
        $candidates = glob($acss_dir . "*.css") ?: [];

        if ($candidates) {
            usort($candidates, fn($a, $b) => filemtime($b) <=> filemtime($a));
            $acss_file = $candidates[0];
        }
    }

    if (!is_readable($acss_file)) {
        return "<p><strong>ACSS Color Matrix:</strong> Could not read the ACSS stylesheet in uploads/automatic-css.</p>";
    }

    $css_text = file_get_contents($acss_file);

    if (!is_string($css_text) || $css_text === "") {
        return "<p><strong>ACSS Color Matrix:</strong> ACSS stylesheet was empty or unreadable.</p>";
    }

    $css_text = preg_replace("~/\*.*?\*/~s", "", $css_text);

    $vars = [];

    if (
        preg_match_all(
            "/(--[a-zA-Z0-9_-]+)\s*:\s*([^;}{]+);/",
            $css_text,
            $m,
            PREG_SET_ORDER
        )
    ) {
        foreach ($m as $match) {
            $name = trim($match[1]);
            $val = trim($match[2]);

            if ($val === "") {
                continue;
            }

            $vars[$name] = $val;
        }
    }

    $label_map = [
        "base" => "core",
    ];

    $stops = [
        "ultra-light",
        "light",
        "semi-light",
        "base",
        "hover",
        "semi-dark",
        "dark",
        "ultra-dark",
    ];

    $columns = [];

    foreach ($prefixes as $family) {
        $rows = [];

        foreach ($stops as $stop) {
            $var_name =
                $stop === "base"
                    ? "--" . $family
                    : "--" . $family . "-" . $stop;

            if (isset($vars[$var_name])) {
                $rows[] = [$stop, $var_name, $vars[$var_name]];
            }
        }

        if (!empty($rows)) {
            $columns[ucfirst($family)] = $rows;
        }
    }

    if ($include_mono) {
        $mono = [];

        foreach (["--white", "--black"] as $vn) {
            if (isset($vars[$vn])) {
                $mono[] = [ltrim($vn, "-"), $vn, $vars[$vn]];
            }
        }

        if (!empty($mono)) {
            $columns["Mono"] = $mono;
        }
    }

    if (empty($columns)) {
        $count = count($vars);
        $msg =
            "<p><strong>ACSS Color Matrix:</strong> Parsed the ACSS file but found no matching families.</p>";

        if ($debug) {
            $msg .=
                '<pre style="padding:12px;border:1px solid #ddd;overflow:auto;">' .
                esc_html(
                    "File: {$acss_file}\nTotal vars parsed: {$count}\nTry debug=1 or adjust prefixes="
                ) .
                "</pre>";
        }

        return $msg;
    }

    ob_start();

    if ($debug) {
        echo '<pre style="padding:12px;border:1px solid #ddd;overflow:auto;margin:0 0 12px;">';
        echo esc_html(
            "ACSS file: {$acss_file}\nTotal vars parsed: " .
                count($vars) .
                "\nColumns rendered: " .
                count($columns)
        );
        echo "</pre>";
    }
    ?>

	<div class="acss-matrix" id="<?php echo esc_attr($uid); ?>">

		<div class="acss-matrix__grid" aria-label="ACSS color matrix">
			<?php foreach ($columns as $title => $rows): ?>
				<div class="acss-matrix__col" aria-label="<?php echo esc_attr($title); ?>">
					<div class="acss-matrix__title"><?php echo esc_html($title); ?></div>

					<?php foreach ($rows as $i => [$label, $var_name, $value]): ?>
						<?php
      $sw_id =
          $uid .
          "-" .
          sanitize_title($title) .
          "-" .
          intval($i) .
          "-" .
          wp_generate_password(6, false, false);

      $anchor_name = "--acss-anchor-" . $sw_id;
      $popover_id = "acss-pop-" . $sw_id;
      $pretty_label = $label_map[$label] ?? $label;
      $theme_group_id = "acss-theme-" . $sw_id;
      ?>

						<div
							class="acss-matrix__swatch"
							style="background: <?php echo esc_attr($value); ?>"
							data-value="<?php echo esc_attr($value); ?>"
							data-var="<?php echo esc_attr($var_name); ?>"
							data-popover="<?php echo esc_attr($popover_id); ?>"
							data-anchor="<?php echo esc_attr($anchor_name); ?>"
						>
							<div class="acss-matrix__meta">
								<div class="acss-matrix__label"><?php echo esc_html($pretty_label); ?></div>

								<div class="acss-matrix__meta-right">
									<div class="acss-matrix__badge" aria-hidden="true"></div>

									<button
										type="button"
										class="acss-matrix__palette-btn"
										aria-label="<?php echo esc_attr("Show transparency steps for " . $var_name); ?>"
										popovertarget="<?php echo esc_attr($popover_id); ?>"
										popovertargetaction="toggle"
										style="anchor-name: <?php echo esc_attr($anchor_name); ?>;"
									>
										<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
											<path fill="currentColor" d="M12 2a10 10 0 0 0-9.95 11A4.5 4.5 0 0 0 6.5 17.5H8c.6 0 1 .4 1 1v.5a3 3 0 0 0 3 3h.5a10 10 0 0 0-.5-20Zm-5 13a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm3-4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm4 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Zm3 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3Z"/>
										</svg>
									</button>
								</div>
							</div>

							<button type="button" class="acss-matrix__value" aria-label="<?php echo esc_attr(
           "Copy value " . $value
       ); ?>">
								<?php echo esc_html($var_name . ": " . $value); ?>
							</button>

							<div class="acss-matrix__copied" role="status" aria-live="polite" aria-atomic="true">
								Copied
							</div>

							<div
								id="<?php echo esc_attr($popover_id); ?>"
								class="acss-matrix__alpha-pop"
								popover
								aria-label="<?php echo esc_attr("Transparency steps for " . $var_name); ?>"
								data-owner="<?php echo esc_attr($sw_id); ?>"
								data-theme="acss"
							>
								<div class="acss-matrix__alpha-head">
									<div class="acss-matrix__alpha-title"><?php echo esc_html(
             str_replace("--", "-", $var_name)
         ); ?></div>

									<button
										type="button"
										class="acss-matrix__alpha-copy-all"
										aria-label="<?php echo esc_attr("Copy all transparency utility variables for " . $var_name); ?>"
									>
										Copy all
									</button>

									<fieldset class="acss-matrix__theme" aria-label="Popup theme">
										<legend class="acss-matrix__sr-only">Popup theme</legend>

										<input class="acss-matrix__theme-input" type="radio"
											name="<?php echo esc_attr($theme_group_id); ?>"
											id="<?php echo esc_attr($theme_group_id . "-acss"); ?>"
											value="acss" checked>
										<label class="acss-matrix__theme-btn" for="<?php echo esc_attr(
              $theme_group_id . "-acss"
          ); ?>">ACSS</label>

										<input class="acss-matrix__theme-input" type="radio"
											name="<?php echo esc_attr($theme_group_id); ?>"
											id="<?php echo esc_attr($theme_group_id . "-light"); ?>"
											value="light">
										<label class="acss-matrix__theme-btn" for="<?php echo esc_attr(
              $theme_group_id . "-light"
          ); ?>">Light</label>

										<input class="acss-matrix__theme-input" type="radio"
											name="<?php echo esc_attr($theme_group_id); ?>"
											id="<?php echo esc_attr($theme_group_id . "-dark"); ?>"
											value="dark">
										<label class="acss-matrix__theme-btn" for="<?php echo esc_attr(
              $theme_group_id . "-dark"
          ); ?>">Dark</label>
									</fieldset>

									<button type="button" class="acss-matrix__alpha-close" aria-label="Close" popovertarget="<?php echo esc_attr(
             $popover_id
         ); ?>" popovertargetaction="hide">
										<svg aria-hidden="true" viewBox="0 0 24 24" focusable="false">
											<path fill="currentColor" d="M18.3 5.7a1 1 0 0 0-1.4 0L12 10.6 7.1 5.7a1 1 0 1 0-1.4 1.4l4.9 4.9-4.9 4.9a1 1 0 1 0 1.4 1.4l4.9-4.9 4.9 4.9a1 1 0 0 0 1.4-1.4L13.4 12l4.9-4.9a1 1 0 0 0 0-1.4Z"/>
										</svg>
									</button>
								</div>

								<div class="acss-matrix__alpha-body">
									<div class="acss-matrix__alpha-row acss-matrix__alpha-row--base">
										<div class="acss-matrix__alpha-chip" aria-hidden="true"></div>
										<div class="acss-matrix__alpha-code"></div>
									</div>

									<div class="acss-matrix__alpha-list" role="list"></div>
								</div>
							</div>
						</div>
					<?php endforeach; ?>
				</div>
			<?php endforeach; ?>
		</div>
	</div>

	<style>
		#<?php echo esc_attr($uid); ?>{
			--col-w: 18rem;
			--swatch-h: 150px;
			--gap: 16px;
			--radius: var(--radius-l);
			--border: rgb(0 0 0 / .08);
			--shadow: 0 1px 2px rgb(0 0 0 / .10);
			--font: var(--sans, apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, Adwaita Sans, Cantarell, Ubuntu, roboto, noto, helvetica, arial, sans-serif);
			--mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono","Courier New", monospace;
			--apca-min: 60;
			--pop-w: min(90vw, 42rem);

			font-family: var(--font);
		}

		#<?php echo esc_attr($uid); ?>,
		#<?php echo esc_attr($uid); ?> *{
			box-sizing: border-box;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__grid{
			display: grid;
			grid-auto-flow: column;
			grid-auto-columns: var(--col-w);
			gap: var(--card-gap, var(--gap));
			align-items: start;
			overflow-x: auto;
			padding: var(--space-m);
			width: 100%;
			max-width: 100%;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__col{
			display: grid;
			gap: var(--card-gap, 10px);
			margin: 0;
			padding: 0;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__title{
			font-weight: 750;
			font-size: 1rem;
			letter-spacing: .2px;
			padding: 6px 2px 2px;
			margin: 0;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__swatch{
			height: var(--swatch-h);
			border-radius: var(--radius);
			position: relative;
			overflow: visible;
			isolation: isolate;
			box-shadow: var(--shadow);
			border: 1px solid var(--border);
			corner-shape: squircle;
			display: flex;
			gap: var(--card-gap, 8px);
			flex-direction: column;
			padding: var(--space-s);
			margin: 0;
			color: #fff;
			--swatch-scrim: transparent;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__swatch.needs-scrim::before{
			content: "";
			position: absolute;
			inset: 0;
			background: var(--swatch-scrim);
			pointer-events: none;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__meta,
		#<?php echo esc_attr($uid); ?> .acss-matrix__value,
		#<?php echo esc_attr($uid); ?> .acss-matrix__copied{
			position: relative;
			z-index: 1;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__meta{
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 0;
			min-width: 0;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__label{
			font-weight: 800;
			font-size: 1rem;
			text-transform: uppercase;
			letter-spacing: .06em;
			margin: 0;
			min-width: 0;
			flex: 1 1 auto;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__meta-right{
			margin-left: auto;
			display: inline-flex;
			align-items: center;
			gap: 8px;
			flex: 0 0 auto;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__badge{
			font-size: calc(var(--text-xs) - 3px);
			padding: 4px 8px;
			border-radius: 999px;
			border: 1px solid rgb(255 255 255 / .35);
			background: rgb(0 0 0 / .18);
			line-height: 1;
			white-space: nowrap;
			margin: 0;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__palette-btn{
			inline-size: 30px;
			block-size: 30px;
			border-radius: 999px;
			border: 1px solid rgb(255 255 255 / .35);
			background: rgb(0 0 0 / .18);
			color: currentColor;
			display: inline-grid;
			place-items: center;
			padding: 0;
			cursor: pointer;
			-webkit-tap-highlight-color: transparent;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__palette-btn svg{
			inline-size: 18px;
			block-size: 18px;
			display: block;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__palette-btn:focus-visible{
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__value{
			font-family: var(--font);
			font-size: calc(var(--text-m) - 2px);
			line-height: 1.15;
			opacity: .98;
			word-break: break-word;
			margin: 0;
			text-align: left;
			border: 0;
			background: transparent;
			color: inherit;
			padding: 0;
			cursor: pointer;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__value:focus-visible{
			outline: 2px solid currentColor;
			outline-offset: 2px;
			border-radius: 6px;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__copied{
			position: absolute;
			inset-inline: auto var(--space-s);
			inset-block: auto var(--space-s);
			padding: 6px 10px;
			border-radius: 999px;
			font-weight: 750;
			font-size: 12px;
			letter-spacing: .02em;
			color: #fff;
			background: rgb(0 0 0 / .55);
			border: 1px solid rgb(255 255 255 / .25);
			backdrop-filter: blur(8px);
			opacity: 0;
			transform: translateY(6px);
			pointer-events: none;
			transition: opacity .18s ease, transform .18s ease;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__swatch.is-copied .acss-matrix__copied{
			opacity: 1;
			transform: translateY(0);
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__swatch.is-light{
			color: rgb(10 10 10);
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__swatch.is-light .acss-matrix__badge,
		#<?php echo esc_attr($uid); ?> .acss-matrix__swatch.is-light .acss-matrix__palette-btn{
			border-color: rgb(0 0 0 / .18);
			background: rgb(255 255 255 / .60);
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__swatch.is-light .acss-matrix__value{
			opacity: .9;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-pop{
			inline-size: var(--pop-w);
			border-radius: calc(var(--radius) + 2px);
			box-shadow: 0 12px 30px rgb(0 0 0 / .35);
			backdrop-filter: blur(16px);
			padding: 14px;
			background: var(--body-bg-color, rgb(15 15 18 / .92));
			color: var(--text-color, #fff);
			border: 1px solid rgb(0 0 0 / .12);
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-pop::backdrop{
			background: transparent;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-pop[data-theme="light"]{
			background: rgb(255 255 255 / .92);
			color: rgb(10 10 10);
			border: 1px solid rgb(0 0 0 / .14);
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-pop[data-theme="dark"]{
			background: rgb(10 10 10 / .92);
			color: #fff;
			border: 1px solid rgb(255 255 255 / .18);
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-head{
			display: flex;
			align-items: center;
			gap: 10px;
			margin-bottom: 12px;
			flex-wrap: wrap;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-title{
			font-family: var(--mono);
			font-size: 22px;
			letter-spacing: .2px;
			font-weight: 750;
			margin: 0;
			flex: 1 1 auto;
			min-width: 12ch;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-copy-all,
		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-close{
			block-size: 42px;
			border-radius: 999px;
			border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
			background: color-mix(in srgb, currentColor 8%, transparent);
			color: inherit;
			display: inline-grid;
			place-items: center;
			cursor: pointer;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-copy-all{
			inline-size: auto;
			padding-inline: 14px;
			font-weight: 750;
			font-size: 13px;
			white-space: nowrap;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-close{
			margin-left: auto;
			inline-size: 42px;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-copy-all:focus-visible,
		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-close:focus-visible{
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-close svg{
			inline-size: 18px;
			block-size: 18px;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-body{
			display: grid;
			gap: 10px;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-row{
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 10px 12px;
			border-radius: 14px;
			border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
			background: color-mix(in srgb, currentColor 7%, transparent);
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-chip{
			inline-size: 26px;
			block-size: 26px;
			border-radius: 8px;
			border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
			background: transparent;
			flex: 0 0 auto;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-code{
			font-family: var(--mono);
			font-size: 15px;
			line-height: 1.2;
			opacity: .95;
			word-break: break-word;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-list{
			display: grid;
			gap: 10px;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__sr-only{
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			padding: 0;
			margin: -1px;
			overflow: hidden;
			clip: rect(0, 0, 0, 0);
			white-space: nowrap;
			border: 0;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__theme{
			display: inline-flex;
			align-items: center;
			gap: 0;
			border-radius: 999px;
			border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
			background: color-mix(in srgb, currentColor 6%, transparent);
			padding: 2px;
			margin: 0;
			flex: 0 0 auto;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__theme-input{
			position: absolute;
			opacity: 0;
			pointer-events: none;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__theme-btn{
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 6px 10px;
			border-radius: 999px;
			font-weight: 750;
			font-size: 12px;
			letter-spacing: .02em;
			cursor: pointer;
			user-select: none;
			color: inherit;
			opacity: .85;
			margin-bottom: 0;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__theme-input:checked + .acss-matrix__theme-btn{
			background: color-mix(in srgb, currentColor 14%, transparent);
			opacity: 1;
		}

		#<?php echo esc_attr($uid); ?> .acss-matrix__theme-btn:focus-visible{
			outline: 2px solid currentColor;
			outline-offset: 2px;
		}

		@supports (anchor-name: --a) and (position-anchor: --a){
			#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-pop{
				position: fixed;
				position-anchor: var(--acss-anchor);
				position-area: block-end center;
				margin-block-start: 10px;
				position-try-fallbacks: flip-block, flip-inline, flip-block flip-inline;
			}
		}

		@supports not ((anchor-name: --a) and (position-anchor: --a)){
			#<?php echo esc_attr($uid); ?> .acss-matrix__alpha-pop{
				position: fixed;
				left: 50%;
				top: 18vh;
				transform: translateX(-50%);
			}
		}

		@media (max-width: 1100px){
			#<?php echo esc_attr($uid); ?> .acss-matrix__grid{
				grid-auto-flow: row;
				grid-auto-columns: unset;
				grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
				overflow-x: visible;
			}
		}
	</style>

	<script>
	(() => {
		const host = document.getElementById(<?php echo wp_json_encode($uid); ?>);
		if (!host) return;

	

		const clamp01 = (v) => Math.min(1, Math.max(0, v));

		const srgb8ToLin = (c8) => {
			const c = c8 / 255;
			return (c <= 0.04045) ? (c / 12.92) : Math.pow((c + 0.055) / 1.055, 2.4);
		};

		const yFromRGB = (r8, g8, b8) => {
			const r = srgb8ToLin(r8), g = srgb8ToLin(g8), b = srgb8ToLin(b8);
			return (0.2126 * r) + (0.7152 * g) + (0.0722 * b);
		};

		const apcaLc = (textRGB, bgRGB) => {
			const Ytxt = yFromRGB(textRGB[0], textRGB[1], textRGB[2]);
			const Ybg  = yFromRGB(bgRGB[0],  bgRGB[1],  bgRGB[2]);

			const txt = clamp01(Ytxt);
			const bg  = clamp01(Ybg);

			const isDarkText = txt < bg;

			const normBG  = Math.pow(bg, 0.56);
			const normTXT = Math.pow(txt, 0.57);

			let lc = (normBG - normTXT) * 1.14 * 100;

			if (!isDarkText) {
				lc = -lc;
			}

			return lc;
		};

		const parseRgb = (cssColor) => {
			const m = /rgba?\(\s*([0-9.]+)[,\s]+([0-9.]+)[,\s]+([0-9.]+)/i.exec(cssColor || '');

			if (!m) {
				return null;
			}

			const r = Math.round(parseFloat(m[1]));
			const g = Math.round(parseFloat(m[2]));
			const b = Math.round(parseFloat(m[3]));

			if (![r, g, b].every(Number.isFinite)) {
				return null;
			}

			return [r, g, b];
		};

		const parseL = (v) => {
			const m = /oklch\(\s*([0-9.]+)/i.exec(v || '');

			if (!m) {
				return null;
			}

			const L = parseFloat(m[1]);

			return Number.isFinite(L) ? L : null;
		};

		const getApcaMin = () => {
			const raw = getComputedStyle(host).getPropertyValue('--apca-min').trim();
			const n = parseFloat(raw);

			return Number.isFinite(n) ? Math.abs(n) : 60;
		};

		const WHITE = [255,255,255];
		const BLACK = [10,10,10];
		const minLc = getApcaMin();

		const copyText = async (text) => {
			const t = String(text || '').trim();

			if (!t) {
				return false;
			}

			try {
				if (navigator.clipboard && window.isSecureContext) {
					await navigator.clipboard.writeText(t);
					return true;
				}
			} catch (e) {}

			try {
				const ta = document.createElement('textarea');
				ta.value = t;
				ta.setAttribute('readonly', '');
				ta.style.position = 'fixed';
				ta.style.left = '-9999px';
				ta.style.top = '0';
				document.body.appendChild(ta);
				ta.select();

				const ok = document.execCommand('copy');

				document.body.removeChild(ta);

				return !!ok;
			} catch (e) {}

			return false;
		};

		const pulseCopied = (sw) => {
			if (!sw) {
				return;
			}

			sw.classList.add('is-copied');

			window.clearTimeout(sw.__acssCopiedTO);

			sw.__acssCopiedTO = window.setTimeout(() => {
				sw.classList.remove('is-copied');
			}, 1200);
		};

		const THEME_STORE_KEY = 'acss_matrix_pop_theme';

		const validTheme = (t) => {
			return (t === 'acss' || t === 'light' || t === 'dark') ? t : 'acss';
		};

		const getStoredTheme = () => {
			try {
				return validTheme(localStorage.getItem(THEME_STORE_KEY) || 'acss');
			} catch (e) {
				return 'acss';
			}
		};

		const setStoredTheme = (t) => {
			try {
				localStorage.setItem(THEME_STORE_KEY, t);
			} catch (e) {}
		};

		const setPopoverTheme = (pop, theme) => {
			if (!pop) {
				return;
			}

			pop.dataset.theme = validTheme(theme);
		};

		const syncPopoverRadios = (pop) => {
			if (!pop) {
				return;
			}

			const t = validTheme(pop.dataset.theme || 'acss');
			const input = pop.querySelector(`.acss-matrix__theme-input[value="${CSS.escape(t)}"]`);

			if (input) {
				input.checked = true;
			}
		};

		const getTransVarBaseName = (varName) => {
			return String(varName || '')
				.trim()
				.replace(/^--/, '');
		};

		const buildTransparencyUtilityCSS = (varName) => {
			const clean = getTransVarBaseName(varName);

			if (!clean) {
				return '';
			}

			const cssVarRef = `var(--${clean})`;
			const steps = [10,20,30,40,50,60,70,80,90];

			return steps
				.map((pct) => `--${clean}-trans-${pct}: color-mix(in oklch, ${cssVarRef} ${pct}%, transparent);`)
				.join('\n');
		};

		const buildTransparency = (sw) => {
			const popId = sw.getAttribute('data-popover');
			const pop = popId ? document.getElementById(popId) : null;

			if (!pop) {
				return;
			}

			const varName = (sw.getAttribute('data-var') || '').trim();
			const cssVarRef = `var(${varName})`;

			const baseRow = pop.querySelector('.acss-matrix__alpha-row--base');
			const baseChip = baseRow?.querySelector('.acss-matrix__alpha-chip');
			const baseCode = baseRow?.querySelector('.acss-matrix__alpha-code');

			if (baseChip) {
				baseChip.style.background = cssVarRef;
			}

			if (baseCode) {
				baseCode.textContent = cssVarRef;
			}

			const list = pop.querySelector('.acss-matrix__alpha-list');

			if (!list) {
				return;
			}

			list.innerHTML = '';

			const steps = [10,20,30,40,50,60,70,80,90];

			steps.forEach((pct) => {
				const expr = `color-mix(in oklch, ${cssVarRef} ${pct}%, transparent)`;
				const clean = getTransVarBaseName(varName);
				const utilityVar = `--${clean}-trans-${pct}: ${expr};`;

				const row = document.createElement('div');
				row.className = 'acss-matrix__alpha-row';
				row.setAttribute('role', 'listitem');

				const chip = document.createElement('div');
				chip.className = 'acss-matrix__alpha-chip';
				chip.style.background = expr;

				const code = document.createElement('div');
				code.className = 'acss-matrix__alpha-code';
				code.textContent = utilityVar;

				row.appendChild(chip);
				row.appendChild(code);
				list.appendChild(row);
			});

			const anchor = sw.getAttribute('data-anchor');

			if (anchor) {
				pop.style.setProperty('--acss-anchor', anchor);
			}
		};

		host.querySelectorAll('.acss-matrix__swatch').forEach((sw) => {
			const v = sw.getAttribute('data-value') || '';
			const badge = sw.querySelector('.acss-matrix__badge');

			const L = parseL(v);

			if (L !== null) {
				if (badge) {
					badge.textContent = 'L ' + (Math.round(L * 1000) / 10).toFixed(1);
				}
			} else {
				const vv = v.trim().toLowerCase();

				if (vv === '#fff' || vv === '#ffffff' || vv === 'white') {
					if (badge) {
						badge.textContent = 'white';
					}
				} else if (vv === '#000' || vv === '#000000' || vv === 'black') {
					if (badge) {
						badge.textContent = 'black';
					}
				}
			}

			const bgCss = getComputedStyle(sw).backgroundColor;
			const bgRGB = parseRgb(bgCss);

			if (!bgRGB) {
				if (L !== null && L >= 0.72) {
					sw.classList.add('is-light');
				}

				buildTransparency(sw);
				return;
			}

			const lcBlack = apcaLc(BLACK, bgRGB);
			const lcWhite = apcaLc(WHITE, bgRGB);

			const absBlack = Math.abs(lcBlack);
			const absWhite = Math.abs(lcWhite);

			const useBlack = absBlack >= absWhite;
			const bestLc = useBlack ? lcBlack : lcWhite;
			const bestAbs = Math.abs(bestLc);

			sw.classList.toggle('is-light', useBlack);

			if (bestAbs < minLc) {
				sw.classList.add('needs-scrim');

				const deficit = (minLc - bestAbs) / minLc;
				const alpha = Math.max(0.10, Math.min(0.38, 0.12 + deficit * 0.30));

				if (useBlack) {
					sw.style.setProperty('--swatch-scrim', `rgba(255,255,255,${alpha})`);
				} else {
					sw.style.setProperty('--swatch-scrim', `rgba(0,0,0,${alpha})`);
				}
			} else {
				sw.classList.remove('needs-scrim');
				sw.style.removeProperty('--swatch-scrim');
			}

			buildTransparency(sw);
		});

		host.addEventListener('click', async (e) => {
			const copyAllBtn = e.target.closest('.acss-matrix__alpha-copy-all');

			if (copyAllBtn && host.contains(copyAllBtn)) {
				const pop = copyAllBtn.closest('.acss-matrix__alpha-pop');

				if (!pop) {
					return;
				}

				const popId = pop.id;
				const sw = host.querySelector(`.acss-matrix__swatch[data-popover="${CSS.escape(popId)}"]`);

				if (!sw) {
					return;
				}

				const varName = (sw.getAttribute('data-var') || '').trim();
				const toCopy = buildTransparencyUtilityCSS(varName);
				const ok = await copyText(toCopy);

				if (ok) {
					copyAllBtn.textContent = 'Copied';

					window.clearTimeout(copyAllBtn.__acssCopyAllTO);

					copyAllBtn.__acssCopyAllTO = window.setTimeout(() => {
						copyAllBtn.textContent = 'Copy all';
					}, 1200);

					pulseCopied(sw);
				}

				return;
			}

			const valueBtn = e.target.closest('.acss-matrix__value');

			if (!valueBtn || !host.contains(valueBtn)) {
				return;
			}

			const sw = valueBtn.closest('.acss-matrix__swatch');

			if (!sw) {
				return;
			}

			const raw = (sw.getAttribute('data-value') || '').trim();

			if (!raw) {
				return;
			}

			const m = /(oklch\([^)]+\))/i.exec(raw);
			const toCopy = (m && m[1]) ? m[1].trim() : raw;
			const ok = await copyText(toCopy);

			if (ok) {
				pulseCopied(sw);
			}
		});

		const globalTheme = getStoredTheme();

		host.querySelectorAll('.acss-matrix__alpha-pop').forEach((pop) => {
			setPopoverTheme(pop, globalTheme);
			syncPopoverRadios(pop);
		});

		host.addEventListener('change', (e) => {
			const input = e.target;

			if (!input || !input.classList || !input.classList.contains('acss-matrix__theme-input')) {
				return;
			}

			const pop = input.closest('.acss-matrix__alpha-pop');

			if (!pop) {
				return;
			}

			const t = validTheme(input.value);

			setPopoverTheme(pop, t);
			setStoredTheme(t);

			host.querySelectorAll('.acss-matrix__alpha-pop').forEach((p) => {
				setPopoverTheme(p, t);
				syncPopoverRadios(p);
			});
		});

		document.addEventListener('toggle', (e) => {
			const pop = e.target;

			if (!pop || !pop.classList || !pop.classList.contains('acss-matrix__alpha-pop')) {
				return;
			}

			if (!host.contains(pop)) {
				return;
			}

			if (pop.matches(':popover-open')) {
				const t = getStoredTheme();

				setPopoverTheme(pop, t);
				syncPopoverRadios(pop);

				const popId = pop.id;
				const sw = host.querySelector(`.acss-matrix__swatch[data-popover="${CSS.escape(popId)}"]`);

				if (sw) {
					buildTransparency(sw);
				}
			}
		}, true);
	})();
	</script>

	<?php return ob_get_clean();
});

This site’s main colors

Primary
ultra-light
Copied
-primary-ultra-light
Popup theme
light
Copied
-primary-light
Popup theme
semi-light
Copied
-primary-semi-light
Popup theme
core
Copied
-primary
Popup theme
hover
Copied
-primary-hover
Popup theme
semi-dark
Copied
-primary-semi-dark
Popup theme
dark
Copied
-primary-dark
Popup theme
ultra-dark
Copied
-primary-ultra-dark
Popup theme
Base
ultra-light
Copied
-base-ultra-light
Popup theme
light
Copied
-base-light
Popup theme
semi-light
Copied
-base-semi-light
Popup theme
core
Copied
-base
Popup theme
hover
Copied
-base-hover
Popup theme
semi-dark
Copied
-base-semi-dark
Popup theme
dark
Copied
-base-dark
Popup theme
ultra-dark
Copied
-base-ultra-dark
Popup theme