Markdown

example.md 36 colors
  1---
  2title: "Theme test document"
  3author: "Developer"
  4---
  5
  6# Heading level 1 (H1)
  7## Heading level 2 (H2)
  8### Heading level 3 (H3)
  9
 10This is a standard paragraph. It allows testing **bold** text, *italic* text, and ***bold and italic*** text. Let's also test ~~strikethrough~~ text.
 11
 12> **Important note:** This is a quote (blockquote).
 13> It spans multiple lines and includes a [link to a website](https://www.rust-lang.org/).
 14
 15#### Lists and structures
 16
 17* Bullet list (level 1)
 18* Next item
 19  * Indented sub-item (level 2)
 20  * Another sub-item with `inline code`
 21
 221. Numbered list (first step)
 232. Second step
 24   1. Sub-step A
 25   2. Sub-step B
 26
 27#### Code blocks and media
 28
 29Here is a code block with language specification:
 30
 31```json
 32{
 33  "string_key": "value",
 34  "number_key": 42,
 35  "boolean_key": false,
 36  "null_key": null,
 37  "nested": {
 38    "level1": {
 39      "level2": {
 40        "level3": [1, [2, [3, [4]]]]
 41      }
 42    }
 43  }
 44}
 45

Python

example.py 35 colors
  1import os
  2from datetime import datetime
  3from typing import List, Dict, Optional, Union
  4
  5# This is a single-line comment
  6"""
  7Useful for verifying the color of module or function descriptions.
  8"""
  9
 10GLOBAL_CONSTANT_PI = 3.1415926535
 11
 12def dummy_decorator(func):
 13    """Test decorator."""
 14    def wrapper(*args, **kwargs):
 15        return func(*args, **kwargs)
 16    return wrapper
 17
 18class SyntaxTester(Exception):
 19    def __init__(self, name: str, is_active: bool = True):
 20        self.data_collection: List[Union[int, str]] = [1, 2, "three", 4.5]
 21        self.config: Dict[str, Optional[bool]] = {"dark_mode": True, "cache": None}
 22        self.nested = {
 23            "level1": {
 24                "level2": {
 25                    "level3": [
 26                        [1, [2, [3, [4]]]]
 27                    ]
 28                }
 29            }
 30        }
 31
 32    @classmethod
 33    def test_colors(cls, value: int = 0) -> None:
 34        if value < 0:
 35            raise ValueError("Value cannot be negative")
 36
 37        # Test loops and formatted strings (f-strings)
 38        for i in range(10):
 39            formatted_string = f"Test of class {cls.__name__} - Iteration: {i}"
 40            print(formatted_string)
 41
 42        try:
 43            with open("dummy_file.txt", "r", encoding="utf-8") as file:
 44                content = file.read()
 45        except FileNotFoundError as error:
 46            pass # Silent keyword
 47

TypeScript

example.ts 39 colors
  1/**
  2 * @fileoverview Artificial Intelligence Core - ARN Spaceport
  3 * @TODO Implement quantum computing nodes before v2.0
  4 */
  5
  6// Mock definitions for demonstration
  7interface IConfig { [key: string]: any }
  8class BaseAgent {
  9  public initialize(): void {}
 10  public async process(payload: string): Promise<void> {}
 11}
 12function Injectable(id: string) { return (ctr: Function) => {}; }
 13function LogExecutionTime() { return (...args: any[]) => {}; }
 14
 15// Semantic analysis regex (Highlights RegExp colors)
 16const TOKEN_REGEX = /^(?:[a-zA-Z_]\w*)\s*:\s*(?<value>.*)$/g;
 17
 18@Injectable('QuantumNode')
 19export class NebulaProcessor<T> extends BaseAgent implements IConfig {
 20  // Highlights 'static' (underlined) and 'readonly' (italic) modifiers
 21  public static readonly MAX_THREADS: number = 42
 22  private isAwake: boolean = false;
 23
 24  @LogExecutionTime()
 25  public async analyzeData(payload: string | null): Promise<void> {
 26    if (!payload) return undefined;
 27
 28    const dynamicId = `node_${Math.random()}`;
 29    console.log(`[${dynamicId}] Starting analysis...`);
 30
 31    const nestedData = {
 32      level1: {
 33        level2: {
 34          level3: [
 35            [1, [2, [3, [4]]]]
 36          ]
 37        }
 38      }
 39    };
 40    try {
 41      await this.process(payload);
 42    } catch (error: any) {
 43      throw new Error(`Analysis failed: ${error.message}`);
 44    }
 45  } 
 46}
 47// try ARN-Skin --Explore  

Rust

example.rs 28 colors
  1---
  2
  3### 🦀 Rust
  4
  5This language is excellent for testing themes in depth thanks to its macros, lifetimes, traits, pattern matching, and raw strings.
  6
  7```rust
  8//! Module-level documentation comment (crate level)
  9//! Used to generate external documentation.
 10
 11#![allow(dead_code)] // Global attribute
 12
 13use std::collections::HashMap;
 14use std::fmt::{Display, Formatter, Result};
 15
 16/// Documentation comment describing a structure.
 17#[derive(Debug, Clone, PartialEq)]
 18pub struct ColorScheme<'a, T> {
 19    name: String,
 20    id_number: u32,
 21    _phantom: std::marker::PhantomData<&'a T>,
 22}
 23
 24// Trait implementation with generics and lifetimes
 25impl<'a, T: Display> ColorScheme<'a, T> {
 26    fn apply_color(&self) -> String {
 27        // Macro usage (the "!" is often colored differently)
 28        format!("Theme {}: (ID: {})", self.name, self.id_number)
 29    }
 30}
 31
 32/* * Standard multi-line comment block.
 33 * Useful for long internal explanations.
 34 */
 35pub fn test_syntax_highlighting(param: i32, reference: &str) -> Result {
 36    // Mutable variables and vectors
 37    let mut float_vector = vec![1.54_f32, 2.0, 3.14159];
 38    let byte_literal = b'A'; // Byte literal
 39
 40    // Nested data structure to showcase rainbow brackets
 41    let nested = vec![
 42        vec![
 43            vec![
 44                vec![1, 2, 3]
 45            ]
 46        ]
 47    ];
 48
 49    let mut dictionary = HashMap::new();
 50    dictionary.insert("keyword", 100_000);
 51
 52    // Pattern matching (Match)
 53    match param {
 54        0 => println!("Exact zero"),
 55        1..=10 => println!("In the range 1 to 10"),
 56        _ => panic!("Panic macro execution with {:?}", dictionary),
 57    }
 58
 59    // For loop with iterator, mutable reference and shadowing
 60    for (index, value) in float_vector.iter_mut().enumerate() {
 61        let index = index as f32; // Shadowing the index variable
 62        *value += index;
 63    }
 64
 65    Ok(())
 66}
 67

CSS

example.css 26 colors
  1/* Example CSS — exercises broad CSS syntax coverage for theme audits */
  2
  3@charset "UTF-8";
  4@import url("./reset.css");
  5@namespace svg url("http://www.w3.org/2000/svg");
  6
  7:root {
  8  --primary-color: #c0ff00;
  9  --secondary-color: rgba(63, 229, 255, 0.85);
 10  --spacing: clamp(1rem, 2.5vw, 2rem);
 11  --radius: 0.5rem;
 12  --font-stack: "Inter", system-ui, -apple-system, sans-serif;
 13}
 14
 15/* Universal + type + id + class + attribute selectors */
 16*,
 17*::before,
 18*::after {
 19  box-sizing: border-box;
 20}
 21
 22@supports (backdrop-filter: blur(10px)) {
 23  .glass {
 24    backdrop-filter: blur(10px) saturate(1.2);
 25    background: rgb(255 255 255 / 0.1);
 26  }
 27}
 28
 29/* Container query */
 30@container (min-width: 400px) {
 31  .card {
 32    padding: 2rem;
 33  }
 34}
 35
 36/* Vendor prefixes + !important */
 37.scrollbar {
 38  -webkit-overflow-scrolling: touch !important;
 39  scrollbar-width: thin;
 40  scrollbar-color: var(--primary-color) transparent;
 41}
 42
 43/* Nested at-rules to showcase rainbow brackets */
 44@media (min-width: 768px) {
 45  @supports (display: grid) {
 46    @container (min-width: 400px) {
 47      .nested {
 48        color: red;
 49      }
 50    }
 51  }
 52}
 53

HTML

example.html 29 colors
  1<!DOCTYPE html>
  2<html lang="en" data-theme="dark">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>VS Code Theme Test</title>
  7    <style>
  8        /* Embedded CSS to verify mixed-language detection */
  9        :root {
 10            --primary-color: #ff0055;
 11        }
 12        .container-class {
 13            background-color: rgba(25, 25, 25, 0.9);
 14            font-family: 'Courier New', Courier, monospace !important;
 15            margin: 10px auto;
 16        }
 17    </style>
 18</head>
 19<body>
 20    <main class="container-class">
 21        <section aria-labelledby="main-title">
 22            <p>
 23                Here is a paragraph with an <a href="https://example.com" target="_blank" rel="noopener">external link</a>.
 24                It contains <strong>bold</strong> text, <em>italic</em> text, and an inline <code>code</code> tag.
 25            </p>
 26
 27            <img src="placeholder.svg" alt="Image description" width="100%" height="auto" />
 28
 29            <form action="/submit-endpoint" method="POST" onsubmit="return false;">
 30                <label for="user-input">Required input:</label>
 31                <input type="text" id="user-input" name="data_field" placeholder="Type here..." required>
 32                <button type="submit" disabled>Send data</button>
 33            </form>
 34        </section>
 35    </main>
 36
 37    <script>
 38        // Embedded JS to verify mixed-language detection
 39        const greetingMessage = "Initialization script loaded";
 40
 41        function initializeApp(configObj) {
 42            const nested = {
 43                level1: {
 44                    level2: {
 45                        level3: [
 46                            [1, [2, [3]]]
 47                        ]
 48                    }
 49                }
 50            };
 51        }
 52    </script>
 53</body>
 54</html>
 55

JSON

example.json 17 colors
  1{
  2  "$schema": "https://json.schemastore.org/package.json",
  3  "name": "arn-skin-example",
  4  "version": "1.2.3",
  5  "description": "Example JSON exercising broad syntax coverage for theme audits.",
  6  "private": true,
  7  "dependencies": {
  8    "chalk": "^5.3.0",
  9    "kleur": "~4.1.5",
 10    "picocolors": "1.0.0"
 11  },
 12  "devDependencies": {
 13    "@types/node": "^20.0.0",
 14    "typescript": "5.3.3",
 15    "vitest": "^1.0.0"
 16  },
 17  "config": {
 18    "colorFormat": "hex",
 19    "supportedLanguages": ["typescript", "python", "rust"],
 20    "maxDepth": 12,
 21    "enableCache": true,
 22    "cacheTtl": null,
 23    "retries": 0,
 24    "ratio": 1.618,
 25    "negative": -42,
 26    "scientific": 1.23e-7,
 27    "unicode": "\u00e9\u00e0\u00ea — hello \u4e16\u754c",
 28    "escape": "line 1\nline 2\ttab\"quote\\backslash"
 29  },
 30  "nested": {
 31    "deeply": {
 32      "structured": {
 33        "arrays": [
 34          [1, 2, 3],
 35          ["a", "b", "c"],
 36          [true, false, null]
 37        ],
 38        "mixed": [
 39          { "id": 1, "active": true },
 40          { "id": 2, "active": false, "meta": null }
 41        ]
 42      }
 43    }
 44  }
 45}
 46

Shell

example.sh 29 colors
  1#!/usr/bin/env bash
  2# Example shell script — exercises broad bash syntax coverage for theme audits
  3# shellcheck disable=SC2034
  4
  5set -euo pipefail
  6IFS=$'\n\t'
  7
  8# Constants and variables
  9readonly SCRIPT_DIR="$(cd -- "$(dirname -- "${BASH_SOURCE[0]}")" &>/dev/null && pwd)"
 10readonly LOG_FILE="${SCRIPT_DIR}/build.log"
 11declare -a TARGETS=("spaceport" "uranus" "neptune" "nebula" "mars" "io" "jupiter")
 12declare -A COLORS=(
 13  [io]="#c0ff00"
 14  [neptune]="#3fe5ff"
 15  [jupiter]="#d99815"
 16)
 17
 18# Main loop
 19for theme in "${TARGETS[@]}"; do
 20  # Arithmetic
 21  count=$(( count + 1 ))
 22done
 23
 24# Subshell + pipeline
 25(
 26  cd "$BUILD_DIR"
 27  find . -name '*.json' -print0 | xargs -0 -n 1 jq '.name' 2>/dev/null | sort -u
 28)
 29
 30# Case statement
 31case "${1:-help}" in
 32  build|b)   print_banner "BUILD" ;;
 33  test|t)    print_banner "TEST" ;;
 34  clean|c)   rm -rf "$BUILD_DIR" && echo "cleaned" ;;
 35  help|-h|*) echo "Usage: $0 {build|test|clean|help}" ; exit 0 ;;
 36esac
 37
 38# Nested subshells and parameter expansion to showcase rainbow brackets
 39deep=$(
 40  echo $(
 41    echo $(
 42      echo $(
 43        echo "deep"
 44      )
 45    )
 46  )
 47)
 48nested_var=${a:-${b:-${c:-${d:-default}}}}
 49
 50# Exit code
 51exit 0
 52

SQL

example.sql 17 colors
  1-- Example SQL — exercises broad SQL syntax coverage for theme audits
  2-- Comments: single-line and /* block comment */
  3
  4/* Schema definition with foreign keys, check constraints, indexes */
  5CREATE SCHEMA IF NOT EXISTS arn;
  6
  7CREATE TABLE arn.themes (
  8    id           SERIAL      PRIMARY KEY,
  9    name         VARCHAR(64) NOT NULL UNIQUE,
 10    bg_color     CHAR(7)     NOT NULL,
 11    signature    CHAR(7)     NOT NULL,
 12    is_light     BOOLEAN     NOT NULL DEFAULT FALSE,
 13    created_at   TIMESTAMP   NOT NULL DEFAULT CURRENT_TIMESTAMP,
 14    metadata     JSONB,
 15    CONSTRAINT chk_bg_format CHECK (bg_color ~ '^#[0-9a-fA-F]{6}$')
 16);
 17
 18CREATE INDEX idx_themes_name ON arn.themes (LOWER(name));
 19
 20/* Seed data */
 21INSERT INTO arn.themes (name, bg_color, signature, is_light, metadata) VALUES
 22    ('spaceport', '#121416', '#e8d44c', FALSE, '{"planet": "earth-orbit"}'),
 23    ('io',        '#0e100a', '#c0ff00', FALSE, '{"planet": "jupiter-moon"}'),
 24    ('neptune',   '#050B1C', '#3FE5FF', FALSE, '{"planet": "neptune"}'),
 25    ('jupiter',   '#fdfbf5', '#d99815', TRUE,  '{"planet": "jupiter"}');
 26
 27/* Complex query: CTEs, window functions, joins, aggregation */
 28WITH theme_stats AS (
 29    SELECT
 30        t.id,
 31        t.name,
 32        t.is_light,
 33        COUNT(*)      OVER (PARTITION BY t.is_light) AS peer_count,
 34        ROW_NUMBER()  OVER (ORDER BY t.created_at)   AS rn,
 35        RANK()        OVER (ORDER BY LENGTH(t.name) DESC) AS name_rank
 36    FROM arn.themes AS t
 37    WHERE t.created_at >= CURRENT_DATE - INTERVAL '30 days'
 38)
 39SELECT * FROM theme_stats LIMIT 10;
 40
 41-- Nested subqueries to showcase rainbow brackets
 42SELECT * FROM (
 43    SELECT id FROM (
 44        SELECT id FROM (
 45            SELECT id FROM arn.themes WHERE id = 1
 46        )
 47    )
 48);
 49

Methodology

Algorithmic generation, human refinement, cross-language architecture

The palette was first generated algorithmically: real source files in nine languages are tokenized with Microsoft TextMate grammars, candidate hex values are sampled in OKLCH space, and simulated annealing assigns colors to scopes by minimizing pairwise CIE76 ΔE collisions and maximizing chromatic diversity. The output was then extensively refined by hand across many iterations to handle visual conflicts the automated metrics could not see — semantic mismatches between hue family and meaning, awkward neighbors in real code, perceived warmth/coldness of the overall composition, and per-language identity preferences.

The theme is built around general TextMate scope rules that apply to every supported language — concepts like keyword.control, string, entity.name.function, storage.type, punctuation.definition.string, etc. A small number of language-specific rules override the defaults only when the visual context truly demands it (Python support.function.builtin.python vs. generic support.function, Rust entity.name.namespace.rust, JSON support.type.property-name.json, etc.). This architecture keeps the cross-language palette coherent — a string is a string everywhere — while preserving each language's unique syntactic identity. Rainbow brackets follow the same logic: cumulative composed selectors (meta.block.ts meta.block.ts punctuation.definition.block.ts) gradient through saturated colors as nesting deepens.

Quality criteria enforced and verified per theme:

Code samples on this page are rendered in 0xProto, a programming font designed for legibility at small sizes — chosen here for its disambiguated glyphs, programming ligatures, and stable rendering across operating systems.

Real measurements computed below from the actual tokens rendered in the samples above:

Co-occurring tokens (intra-language)
99.4%
3731 / 3753 pairs satisfy ΔE ≥ 12 · worst case ΔE = 0.5
Background contrast
100.0%
256 / 256 foreground colors satisfy ΔE ≥ 15 · worst case ΔE = 38.4

Per-language palettes — colors sorted by OKLCH luminance (brightest first). Hover a swatch to see the rule name and example tokens. Each per-color swatch shows usage count, WCAG ratio, and CIE76 ΔE vs. background (a ! marks the rare colors below the ΔE 15 threshold).

Markdown

36 colors
Co-occurring tokens ΔE min 4.3 · avg 78.4 629/630 pairs ≥ 12 (100%)
Background contrast ΔE min 59.1 · avg 86.1 36/36 colors ≥ 15 (100%)
#01
#D48C49
2× · WCAG 2.7 · ΔE 59
#02
#CE72A6
2× · WCAG 3.1 · ΔE 60
#03
#C86A00
5× · WCAG 3.7 · ΔE 81
#04
#F32A00
1× · WCAG 3.9 · ΔE 106
#05
#4A9D10
1× · WCAG 3.3 · ΔE 83
#06
#7C74C5
2× · WCAG 3.9 · ΔE 68
#07
#008D68
2× · WCAG 4.1 · ΔE 63
#08
#008361
1× · WCAG 4.6 · ΔE 64
#09
#3D8216
8× · WCAG 4.6 · ΔE 78
#10
#B300B7
4× · WCAG 5.6 · ΔE 108
#11
#C20088
1× · WCAG 5.6 · ΔE 94
#12
#9200F3
15× · WCAG 5.8 · ΔE 133
#13
#BC3067
5× · WCAG 5.4 · ΔE 81
#14
#CE003E
2× · WCAG 5.5 · ΔE 92
#15
#C03147
4× · WCAG 5.4 · ΔE 82
#16
#C70070
7× · WCAG 5.5 · ΔE 91
#17
#B33582
4× · WCAG 5.4 · ΔE 82
#18
#5B61C5
8× · WCAG 5.1 · ΔE 82
#19
#A05900
8× · WCAG 5.2 · ΔE 78
#20
#007274
2× · WCAG 5.5 · ΔE 62
#21
#900094
8× · WCAG 7.8 · ΔE 102
#22
#0F55AB
2× · WCAG 7.0 · ΔE 84
#23
#4E6100
1× · WCAG 6.7 · ΔE 76
#24
#8F3B00
2× · WCAG 7.3 · ΔE 83
#25
#4600F0
6× · WCAG 8.1 · ΔE 143
#26
#88238A
2× · WCAG 7.6 · ΔE 93
#27
#006A33
5× · WCAG 6.5 · ΔE 75
#28
#504838
8× · WCAG 8.7 · ΔE 68
#29
#4E4B00
2× · WCAG 8.7 · ΔE 77
#30
#7D013C
2× · WCAG 10.5 · ΔE 88
#31
#3500BA
4× · WCAG 10.9 · ΔE 129
#32
#780053
1× · WCAG 10.6 · ΔE 91
#33
#6D2C00
2× · WCAG 10.1 · ΔE 84
#34
#204F00
1× · WCAG 9.3 · ΔE 83
#35
#00316A
2× · WCAG 12.3 · ΔE 88
#36
#171E00
2× · WCAG 16.6 · ΔE 90

Python

35 colors
Co-occurring tokens ΔE min 0.5 · avg 73.8 591/595 pairs ≥ 12 (99%)
Background contrast ΔE min 50.4 · avg 86.4 35/35 colors ≥ 15 (100%)
#01
#2CCBB6
2× · WCAG 2.0 · ΔE 50
#02
#B178C6
4× · WCAG 3.2 · ΔE 64
#03
#908B00
12× · WCAG 3.5 · ΔE 72
#04
#DE4B5E
9× · WCAG 3.8 · ΔE 76
#05
#DE5038
3× · WCAG 3.8 · ΔE 81
#06
#9B65E0
3× · WCAG 3.8 · ΔE 87
#07
#789300
1× · WCAG 3.4 · ΔE 75
#08
#4A9D10
11× · WCAG 3.3 · ΔE 83
#09
#AF67AF
5× · WCAG 3.8 · ΔE 67
#10
#4F8533
12× · WCAG 4.3 · ΔE 68
#11
#AB2BAE
4× · WCAG 5.5 · ΔE 97
#12
#CB2100
2× · WCAG 5.4 · ΔE 100
#13
#9200F3
39× · WCAG 5.8 · ΔE 133
#14
#BC3067
9× · WCAG 5.4 · ΔE 81
#15
#5754E8
5× · WCAG 5.3 · ΔE 105
#16
#B64430
1× · WCAG 5.3 · ΔE 78
#17
#834CC4
1× · WCAG 5.3 · ΔE 92
#18
#A05900
10× · WCAG 5.2 · ΔE 78
#19
#9B2538
6× · WCAG 7.5 · ΔE 82
#20
#8F3B00
26× · WCAG 7.3 · ΔE 83
#21
#9C006D
4× · WCAG 7.7 · ΔE 92
#22
#7C4B09
2× · WCAG 7.1 · ΔE 75
#23
#9A1000
4× · WCAG 8.3 · ΔE 95
#24
#504838
3× · WCAG 8.7 · ΔE 68
#25
#7D013C
18× · WCAG 10.5 · ΔE 88
#26
#800023
2× · WCAG 10.4 · ΔE 89
#27
#590098
9× · WCAG 10.8 · ΔE 113
#28
#6D2C00
4× · WCAG 10.1 · ΔE 84
#29
#204F00
11× · WCAG 9.3 · ΔE 83
#30
#590097
1× · WCAG 10.8 · ΔE 113
#31
#003647
8× · WCAG 12.5 · ΔE 81
#32
#56003A
4× · WCAG 13.9 · ΔE 92
#33
#221777
1× · WCAG 13.9 · ΔE 105
#34
#201700
2× · WCAG 17.1 · ΔE 91
#35
#20003D
5× · WCAG 18.0 · ΔE 103

TypeScript

39 colors
Co-occurring tokens ΔE min 6.7 · avg 72.5 735/741 pairs ≥ 12 (99%)
Background contrast ΔE min 60.9 · avg 83.4 39/39 colors ≥ 15 (100%)
#01
#B178C6
2× · WCAG 3.2 · ΔE 64
#02
#0096D6
2× · WCAG 3.2 · ΔE 61
#03
#908B00
4× · WCAG 3.5 · ΔE 72
#04
#DE4B5E
6× · WCAG 3.8 · ΔE 76
#05
#9B65E0
12× · WCAG 3.8 · ΔE 87
#06
#DD5139
2× · WCAG 3.8 · ΔE 81
#07
#789300
7× · WCAG 3.4 · ΔE 75
#08
#4A9D10
2× · WCAG 3.3 · ΔE 83
#09
#8C7F00
2× · WCAG 3.9 · ΔE 72
#10
#BA6300
2× · WCAG 4.2 · ΔE 80
#11
#4F8533
20× · WCAG 4.3 · ΔE 68
#12
#3A8300
10× · WCAG 4.6 · ΔE 82
#13
#C13048
16× · WCAG 5.4 · ΔE 82
#14
#9200F3
3× · WCAG 5.8 · ΔE 133
#15
#BC3067
5× · WCAG 5.4 · ΔE 81
#16
#C90065
1× · WCAG 5.5 · ΔE 90
#17
#8054B7
6× · WCAG 5.2 · ΔE 83
#18
#A23EA3
2× · WCAG 5.4 · ΔE 86
#19
#0077AA
7× · WCAG 4.8 · ΔE 65
#20
#A05900
13× · WCAG 5.2 · ΔE 78
#21
#8D6000
7× · WCAG 5.3 · ΔE 74
#22
#007529
2× · WCAG 5.7 · ΔE 78
#23
#6D33A9
2× · WCAG 7.5 · ΔE 98
#24
#A10750
12× · WCAG 7.6 · ΔE 87
#25
#9B2538
12× · WCAG 7.5 · ΔE 82
#26
#8F3B00
43× · WCAG 7.3 · ΔE 83
#27
#9B0037
2× · WCAG 8.3 · ΔE 88
#28
#9A1000
1× · WCAG 8.3 · ΔE 95
#29
#504838
8× · WCAG 8.7 · ΔE 68
#30
#7D013C
1× · WCAG 10.5 · ΔE 88
#31
#003F88
2× · WCAG 9.8 · ΔE 87
#32
#590098
5× · WCAG 10.8 · ΔE 113
#33
#6D282F
11× · WCAG 10.2 · ΔE 79
#34
#6D2C00
2× · WCAG 10.1 · ΔE 84
#35
#204F00
2× · WCAG 9.3 · ΔE 83
#36
#003647
14× · WCAG 12.5 · ΔE 81
#37
#56003A
20× · WCAG 13.9 · ΔE 92
#38
#221777
4× · WCAG 13.9 · ΔE 105
#39
#002B61
6× · WCAG 13.4 · ΔE 90

Rust

28 colors
Co-occurring tokens ΔE min 7.6 · avg 68.1 373/378 pairs ≥ 12 (99%)
Background contrast ΔE min 38.4 · avg 76.7 28/28 colors ≥ 15 (100%)
#01
#FDAAAE
2× · WCAG 1.8 · ΔE 38
#02
#54BBA9
8× · WCAG 2.2 · ΔE 45
#03
#4CB7B9
17× · WCAG 2.3 · ΔE 44
#04
#DE5038
10× · WCAG 3.8 · ΔE 81
#05
#24989A
8× · WCAG 3.4 · ΔE 52
#06
#9B65E0
15× · WCAG 3.8 · ΔE 87
#07
#8D8A3F
11× · WCAG 3.5 · ΔE 57
#08
#789300
31× · WCAG 3.4 · ΔE 75
#09
#9200F3
3× · WCAG 5.8 · ΔE 133
#10
#008078
6× · WCAG 4.7 · ΔE 60
#11
#BC3067
13× · WCAG 5.4 · ΔE 81
#12
#B64430
12× · WCAG 5.3 · ΔE 78
#13
#B14C00
10× · WCAG 5.2 · ΔE 84
#14
#0077AA
3× · WCAG 4.8 · ΔE 65
#15
#8D6000
38× · WCAG 5.3 · ΔE 74
#16
#475995
2× · WCAG 6.5 · ΔE 72
#17
#57518E
2× · WCAG 6.8 · ΔE 73
#18
#9B2538
6× · WCAG 7.5 · ΔE 82
#19
#8F3B00
20× · WCAG 7.3 · ΔE 83
#20
#972552
23× · WCAG 7.5 · ΔE 81
#21
#9A1000
3× · WCAG 8.3 · ΔE 95
#22
#504838
16× · WCAG 8.7 · ΔE 68
#23
#7D013C
26× · WCAG 10.5 · ΔE 88
#24
#590098
6× · WCAG 10.8 · ΔE 113
#25
#6D282F
2× · WCAG 10.2 · ΔE 79
#26
#004E24
2× · WCAG 9.6 · ΔE 79
#27
#56003A
32× · WCAG 13.9 · ΔE 92
#28
#4E1D00
9× · WCAG 13.5 · ΔE 87

CSS

26 colors
Co-occurring tokens ΔE min 11.5 · avg 76.5 324/325 pairs ≥ 12 (100%)
Background contrast ΔE min 40.3 · avg 80.5 26/26 colors ≥ 15 (100%)
#01
#B37CB3
2× · WCAG 3.1 · ΔE 55
#02
#8A9080
9× · WCAG 3.2 · ΔE 40
#03
#00A298
2× · WCAG 3.1 · ΔE 54
#04
#B57598
4× · WCAG 3.4 · ΔE 53
#05
#A78000
3× · WCAG 3.5 · ΔE 72
#06
#9B65E0
1× · WCAG 3.8 · ΔE 87
#07
#DD5139
8× · WCAG 3.8 · ΔE 81
#08
#4A9D10
3× · WCAG 3.3 · ΔE 83
#09
#DD2666
2× · WCAG 4.5 · ΔE 87
#10
#637A00
5× · WCAG 4.7 · ΔE 75
#11
#3A8300
16× · WCAG 4.6 · ΔE 82
#12
#AB2BAE
9× · WCAG 5.5 · ΔE 97
#13
#9200F3
26× · WCAG 5.8 · ΔE 133
#14
#BC3067
22× · WCAG 5.4 · ΔE 81
#15
#5754E8
28× · WCAG 5.3 · ΔE 105
#16
#B64430
2× · WCAG 5.3 · ΔE 78
#17
#B14C00
4× · WCAG 5.2 · ΔE 84
#18
#0077AA
13× · WCAG 4.8 · ΔE 65
#19
#A05900
11× · WCAG 5.2 · ΔE 78
#20
#716000
4× · WCAG 6.0 · ΔE 73
#21
#8F3B00
21× · WCAG 7.3 · ΔE 83
#22
#830094
2× · WCAG 8.5 · ΔE 104
#23
#504838
5× · WCAG 8.7 · ΔE 68
#24
#7D013C
3× · WCAG 10.5 · ΔE 88
#25
#204F00
3× · WCAG 9.3 · ΔE 83
#26
#221777
2× · WCAG 13.9 · ΔE 105

HTML

29 colors
Co-occurring tokens ΔE min 10.0 · avg 76.9 403/406 pairs ≥ 12 (99%)
Background contrast ΔE min 40.3 · avg 82.7 29/29 colors ≥ 15 (100%)
#01
#B37CB3
2× · WCAG 3.1 · ΔE 55
#02
#B178C6
2× · WCAG 3.2 · ΔE 64
#03
#8A9080
3× · WCAG 3.2 · ΔE 40
#04
#0096D6
2× · WCAG 3.2 · ΔE 61
#05
#A78000
36× · WCAG 3.5 · ΔE 72
#06
#9B65E0
1× · WCAG 3.8 · ΔE 87
#07
#DD5139
2× · WCAG 3.8 · ΔE 81
#08
#4A9D10
25× · WCAG 3.3 · ΔE 83
#09
#BA6300
2× · WCAG 4.2 · ΔE 80
#10
#4F8533
2× · WCAG 4.3 · ΔE 68
#11
#3A8300
4× · WCAG 4.6 · ΔE 82
#12
#AB2BAE
1× · WCAG 5.5 · ΔE 97
#13
#C20088
37× · WCAG 5.6 · ΔE 94
#14
#9200F3
32× · WCAG 5.8 · ΔE 133
#15
#BC3067
5× · WCAG 5.4 · ΔE 81
#16
#5754E8
6× · WCAG 5.3 · ΔE 105
#17
#B14C00
2× · WCAG 5.2 · ΔE 84
#18
#A05900
3× · WCAG 5.2 · ΔE 78
#19
#007529
2× · WCAG 5.7 · ΔE 78
#20
#8F3B00
78× · WCAG 7.3 · ΔE 83
#21
#9B2916
4× · WCAG 7.5 · ΔE 86
#22
#9B0037
2× · WCAG 8.3 · ΔE 88
#23
#504838
1× · WCAG 8.7 · ΔE 68
#24
#7D013C
27× · WCAG 10.5 · ΔE 88
#25
#5A3C00
25× · WCAG 9.8 · ΔE 79
#26
#590098
2× · WCAG 10.8 · ΔE 113
#27
#204F00
25× · WCAG 9.3 · ΔE 83
#28
#003647
2× · WCAG 12.5 · ΔE 81
#29
#221777
2× · WCAG 13.9 · ΔE 105

JSON

17 colors
Co-occurring tokens ΔE min 15.3 · avg 77.1 136/136 pairs ≥ 12 (100%)
Background contrast ΔE min 47.8 · avg 80.5 17/17 colors ≥ 15 (100%)
#01
#1BCAE4
4× · WCAG 1.9 · ΔE 48
#02
#CE72A6
2× · WCAG 3.1 · ΔE 60
#03
#4A9D10
19× · WCAG 3.3 · ΔE 83
#04
#008D68
2× · WCAG 4.1 · ΔE 63
#05
#3D8216
35× · WCAG 4.6 · ΔE 78
#06
#9200F3
72× · WCAG 5.8 · ΔE 133
#07
#BC3067
10× · WCAG 5.4 · ΔE 81
#08
#5B61C5
35× · WCAG 5.1 · ΔE 82
#09
#A05900
35× · WCAG 5.2 · ΔE 78
#10
#007274
6× · WCAG 5.5 · ΔE 62
#11
#9C006D
9× · WCAG 7.7 · ΔE 92
#12
#4E4B00
6× · WCAG 8.7 · ΔE 77
#13
#7D013C
23× · WCAG 10.5 · ΔE 88
#14
#6D2C00
9× · WCAG 10.1 · ΔE 84
#15
#204F00
19× · WCAG 9.3 · ΔE 83
#16
#00316A
8× · WCAG 12.3 · ΔE 88
#17
#171E00
2× · WCAG 16.6 · ΔE 90

Shell

29 colors
Co-occurring tokens ΔE min 9.2 · avg 75.1 404/406 pairs ≥ 12 (100%)
Background contrast ΔE min 59.9 · avg 85.4 29/29 colors ≥ 15 (100%)
#01
#CE72A6
2× · WCAG 3.1 · ΔE 60
#02
#B178C6
2× · WCAG 3.2 · ΔE 64
#03
#9B65E0
20× · WCAG 3.8 · ΔE 87
#04
#DD5139
3× · WCAG 3.8 · ΔE 81
#05
#4A9D10
26× · WCAG 3.3 · ΔE 83
#06
#008D68
6× · WCAG 4.1 · ΔE 63
#07
#4F8533
2× · WCAG 4.3 · ΔE 68
#08
#3A8300
6× · WCAG 4.6 · ΔE 82
#09
#585DD4
1× · WCAG 5.2 · ΔE 91
#10
#9200F3
6× · WCAG 5.8 · ΔE 133
#11
#5754E8
4× · WCAG 5.3 · ΔE 105
#12
#0077AA
7× · WCAG 4.8 · ΔE 65
#13
#883FD4
1× · WCAG 5.5 · ΔE 105
#14
#0069DA
4× · WCAG 5.0 · ΔE 88
#15
#8D6000
14× · WCAG 5.3 · ΔE 74
#16
#A10750
23× · WCAG 7.6 · ΔE 87
#17
#8F3B00
30× · WCAG 7.3 · ΔE 83
#18
#9C006D
2× · WCAG 7.7 · ΔE 92
#19
#854400
4× · WCAG 7.2 · ΔE 80
#20
#504838
9× · WCAG 8.7 · ΔE 68
#21
#7D013C
57× · WCAG 10.5 · ΔE 88
#22
#590098
8× · WCAG 10.8 · ΔE 113
#23
#6D282F
4× · WCAG 10.2 · ΔE 79
#24
#204F00
26× · WCAG 9.3 · ΔE 83
#25
#00316A
4× · WCAG 12.3 · ΔE 88
#26
#003647
2× · WCAG 12.5 · ΔE 81
#27
#56003A
12× · WCAG 13.9 · ΔE 92
#28
#221777
16× · WCAG 13.9 · ΔE 105
#29
#171E00
2× · WCAG 16.6 · ΔE 90

SQL

17 colors
Co-occurring tokens ΔE min 13.1 · avg 69.8 136/136 pairs ≥ 12 (100%)
Background contrast ΔE min 39.5 · avg 81.2 17/17 colors ≥ 15 (100%)
#01
#FDABC4
2× · WCAG 1.7 · ΔE 40
#02
#54BBA9
24× · WCAG 2.2 · ΔE 45
#03
#9B65E0
3× · WCAG 3.8 · ΔE 87
#04
#4A9D10
18× · WCAG 3.3 · ΔE 83
#05
#AB2BAE
4× · WCAG 5.5 · ΔE 97
#06
#BC3067
5× · WCAG 5.4 · ΔE 81
#07
#B14C00
52× · WCAG 5.2 · ΔE 84
#08
#475995
6× · WCAG 6.5 · ΔE 72
#09
#9B2538
6× · WCAG 7.5 · ΔE 82
#10
#8F3B00
9× · WCAG 7.3 · ΔE 83
#11
#504838
6× · WCAG 8.7 · ΔE 68
#12
#7D013C
18× · WCAG 10.5 · ΔE 88
#13
#6D282F
5× · WCAG 10.2 · ΔE 79
#14
#204F00
18× · WCAG 9.3 · ΔE 83
#15
#590097
2× · WCAG 10.8 · ΔE 113
#16
#56003A
4× · WCAG 13.9 · ΔE 92
#17
#221777
22× · WCAG 13.9 · ΔE 105