Markdown

example.md 33 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 34 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 25 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 26 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 15 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 28 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 16 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)
98.8%
3394 / 3436 pairs satisfy ΔE ≥ 12 · worst case ΔE = 0.1
Background contrast
100.0%
244 / 244 foreground colors satisfy ΔE ≥ 15 · worst case ΔE = 24.6

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

33 colors
Co-occurring tokens ΔE min 11.1 · avg 70.2 527/528 pairs ≥ 12 (100%)
Background contrast ΔE min 49.9 · avg 87.1 33/33 colors ≥ 15 (100%)
#01
#EEF252
4× · WCAG 15.3 · ΔE 116
#02
#A4FFD0
1× · WCAG 15.6 · ΔE 96
#03
#B4FFA7
7× · WCAG 15.7 · ΔE 102
#04
#FFD0DC
2× · WCAG 13.5 · ΔE 84
#05
#00F7EF
2× · WCAG 13.7 · ΔE 96
#06
#FFD07B
5× · WCAG 12.8 · ΔE 94
#07
#FDD34E
16× · WCAG 12.8 · ΔE 106
#08
#73F982
2× · WCAG 13.7 · ΔE 112
#09
#E4C157
1× · WCAG 10.6 · ΔE 93
#10
#B5D446
4× · WCAG 11.0 · ΔE 103
#11
#DDC600
2× · WCAG 10.7 · ΔE 110
#12
#7EDE86
1× · WCAG 11.1 · ΔE 95
#13
#EDBE00
4× · WCAG 10.5 · ΔE 110
#14
#0CDBC3
2× · WCAG 10.5 · ΔE 88
#15
#83C91F
8× · WCAG 9.1 · ΔE 108
#16
#8FC455
2× · WCAG 9.0 · ΔE 91
#17
#53C491
2× · WCAG 8.5 · ΔE 81
#18
#E87A00
2× · WCAG 6.3 · ΔE 98
#19
#5E99FF
6× · WCAG 6.6 · ΔE 80
#20
#A0A300
2× · WCAG 6.8 · ΔE 92
#21
#C89000
15× · WCAG 6.5 · ΔE 91
#22
#AC82EA
1× · WCAG 6.3 · ΔE 81
#23
#E8764B
1× · WCAG 6.3 · ΔE 83
#24
#9FA235
5× · WCAG 6.8 · ΔE 82
#25
#8A9098
16× · WCAG 5.7 · ΔE 53
#26
#4B90D7
2× · WCAG 5.5 · ΔE 66
#27
#C051C5
2× · WCAG 4.6 · ΔE 85
#28
#B6760F
5× · WCAG 4.9 · ΔE 80
#29
#8C6F4D
4× · WCAG 4.0 · ΔE 50
#30
#5469C5
2× · WCAG 3.7 · ΔE 67
#31
#9F4D85
2× · WCAG 3.4 · ΔE 58
#32
#2E6500
2× · WCAG 2.6 · ΔE 65
#33
#505900
2× · WCAG 2.4 · ΔE 55

Python

34 colors
Co-occurring tokens ΔE min 1.3 · avg 68.0 553/561 pairs ≥ 12 (99%)
Background contrast ΔE min 53.4 · avg 88.5 34/34 colors ≥ 15 (100%)
#01
#EFF322
1× · WCAG 15.4 · ΔE 126
#02
#FFDADE
4× · WCAG 14.4 · ΔE 85
#03
#00F7EF
22× · WCAG 13.7 · ΔE 96
#04
#4AFAB1
9× · WCAG 13.7 · ΔE 105
#05
#A5DDFF
2× · WCAG 12.6 · ΔE 82
#06
#00F3EC
12× · WCAG 13.2 · ΔE 94
#07
#E2D055
5× · WCAG 11.8 · ΔE 100
#08
#65EB75
4× · WCAG 12.0 · ΔE 109
#09
#DDC600
26× · WCAG 10.7 · ΔE 110
#10
#FFAD8F
2× · WCAG 10.2 · ΔE 82
#11
#D7C65A
1× · WCAG 10.7 · ΔE 93
#12
#A7ABFF
8× · WCAG 8.7 · ΔE 80
#13
#CBB600
2× · WCAG 9.0 · ΔE 103
#14
#D3B045
3× · WCAG 8.9 · ΔE 89
#15
#B7BA00
12× · WCAG 8.8 · ΔE 103
#16
#D6AC00
1× · WCAG 8.6 · ΔE 101
#17
#D4AA5D
4× · WCAG 8.5 · ΔE 81
#18
#F6936F
1× · WCAG 8.2 · ΔE 82
#19
#B89CD8
4× · WCAG 7.7 · ΔE 71
#20
#50C05E
2× · WCAG 8.0 · ΔE 92
#21
#E87A00
18× · WCAG 6.3 · ΔE 98
#22
#AF9D00
5× · WCAG 6.7 · ΔE 91
#23
#C89000
39× · WCAG 6.5 · ΔE 91
#24
#8A9098
3× · WCAG 5.7 · ΔE 53
#25
#AB8455
5× · WCAG 5.4 · ΔE 62
#26
#978B35
9× · WCAG 5.3 · ΔE 70
#27
#7977EF
6× · WCAG 5.0 · ΔE 83
#28
#00A26C
3× · WCAG 5.6 · ΔE 74
#29
#C051C5
4× · WCAG 4.6 · ΔE 85
#30
#009F6A
1× · WCAG 5.4 · ΔE 73
#31
#E05000
4× · WCAG 4.7 · ΔE 97
#32
#D9571F
10× · WCAG 4.7 · ΔE 88
#33
#B6760F
9× · WCAG 4.9 · ΔE 80
#34
#3B9D49
2× · WCAG 5.4 · ΔE 78

TypeScript

39 colors
Co-occurring tokens ΔE min 1.5 · avg 70.7 731/741 pairs ≥ 12 (99%)
Background contrast ΔE min 53.4 · avg 88.9 39/39 colors ≥ 15 (100%)
#01
#C4FD8D
12× · WCAG 15.6 · ΔE 106
#02
#ECF086
7× · WCAG 15.3 · ΔE 102
#03
#FFDADE
2× · WCAG 14.4 · ΔE 85
#04
#00F7EF
4× · WCAG 13.7 · ΔE 96
#05
#4AFAB1
5× · WCAG 13.7 · ΔE 105
#06
#00F3EC
20× · WCAG 13.2 · ΔE 94
#07
#E8D44C
7× · WCAG 12.3 · ΔE 104
#08
#C5D797
2× · WCAG 11.9 · ΔE 85
#09
#DDC600
43× · WCAG 10.7 · ΔE 110
#10
#D3C672
10× · WCAG 10.6 · ΔE 86
#11
#CACD00
2× · WCAG 10.8 · ΔE 111
#12
#A7ABFF
14× · WCAG 8.7 · ΔE 80
#13
#C8B300
4× · WCAG 8.7 · ΔE 101
#14
#B7BA00
4× · WCAG 8.8 · ΔE 103
#15
#D6AC00
4× · WCAG 8.6 · ΔE 101
#16
#3EBEFF
6× · WCAG 8.8 · ΔE 79
#17
#D4AA5D
20× · WCAG 8.5 · ΔE 81
#18
#ED9E28
6× · WCAG 8.4 · ΔE 97
#19
#B6B92E
1× · WCAG 8.8 · ΔE 96
#20
#F6936F
7× · WCAG 8.2 · ΔE 82
#21
#B89CD8
1× · WCAG 7.7 · ΔE 71
#22
#6EA3FF
2× · WCAG 7.3 · ΔE 79
#23
#90AD00
12× · WCAG 7.2 · ΔE 96
#24
#E87A00
1× · WCAG 6.3 · ΔE 98
#25
#26BA44
11× · WCAG 7.2 · ΔE 99
#26
#C89000
3× · WCAG 6.5 · ΔE 91
#27
#FC597D
2× · WCAG 6.0 · ΔE 86
#28
#7CA600
2× · WCAG 6.4 · ΔE 94
#29
#C08A00
2× · WCAG 6.0 · ΔE 88
#30
#8A9098
8× · WCAG 5.7 · ΔE 53
#31
#978B35
6× · WCAG 5.3 · ΔE 70
#32
#7977EF
12× · WCAG 5.0 · ΔE 83
#33
#00A26C
12× · WCAG 5.6 · ΔE 74
#34
#C051C5
2× · WCAG 4.6 · ΔE 85
#35
#D84495
2× · WCAG 4.6 · ΔE 80
#36
#D9571F
13× · WCAG 4.7 · ΔE 88
#37
#B6760F
5× · WCAG 4.9 · ΔE 80
#38
#008C6E
2× · WCAG 4.4 · ΔE 61
#39
#B93100
2× · WCAG 3.1 · ΔE 85

Rust

28 colors
Co-occurring tokens ΔE min 1.3 · avg 65.0 372/378 pairs ≥ 12 (98%)
Background contrast ΔE min 48.3 · avg 84.9 28/28 colors ≥ 15 (100%)
#01
#FFE8EA
2× · WCAG 15.8 · ΔE 88
#02
#ECF086
3× · WCAG 15.3 · ΔE 102
#03
#FBE762
23× · WCAG 14.7 · ΔE 108
#04
#E3DA99
6× · WCAG 13.0 · ΔE 88
#05
#51F3EB
16× · WCAG 13.5 · ΔE 92
#06
#4AFAB1
6× · WCAG 13.7 · ΔE 105
#07
#E8D44C
38× · WCAG 12.3 · ΔE 104
#08
#DDC600
20× · WCAG 10.7 · ΔE 110
#09
#CAB949
10× · WCAG 9.3 · ΔE 90
#10
#14D1CB
18× · WCAG 9.7 · ΔE 82
#11
#D3B045
10× · WCAG 8.9 · ΔE 89
#12
#D4AA5D
32× · WCAG 8.5 · ΔE 81
#13
#F6936F
31× · WCAG 8.2 · ΔE 82
#14
#F99444
10× · WCAG 8.2 · ΔE 93
#15
#B89CD8
3× · WCAG 7.7 · ΔE 71
#16
#54BBA9
8× · WCAG 8.0 · ΔE 72
#17
#B2A33D
9× · WCAG 7.2 · ΔE 82
#18
#E87A00
26× · WCAG 6.3 · ΔE 98
#19
#26BA44
2× · WCAG 7.2 · ΔE 99
#20
#C89000
3× · WCAG 6.5 · ΔE 91
#21
#8A9098
16× · WCAG 5.7 · ΔE 53
#22
#7B7ED7
2× · WCAG 5.1 · ΔE 70
#23
#7977EF
6× · WCAG 5.0 · ΔE 83
#24
#00A26C
15× · WCAG 5.6 · ΔE 74
#25
#009F6A
4× · WCAG 5.4 · ΔE 73
#26
#B6760F
13× · WCAG 4.9 · ΔE 80
#27
#2D7F38
2× · WCAG 3.7 · ΔE 66
#28
#475995
2× · WCAG 2.8 · ΔE 48

CSS

25 colors
Co-occurring tokens ΔE min 0.1 · avg 63.5 292/300 pairs ≥ 12 (97%)
Background contrast ΔE min 53.4 · avg 89.3 25/25 colors ≥ 15 (100%)
#01
#ECF086
13× · WCAG 15.3 · ΔE 102
#02
#00F7EF
6× · WCAG 13.7 · ΔE 96
#03
#E8D44C
9× · WCAG 12.3 · ΔE 104
#04
#E2D055
28× · WCAG 11.8 · ΔE 100
#05
#65EB75
9× · WCAG 12.0 · ΔE 109
#06
#B6D357
5× · WCAG 10.9 · ΔE 98
#07
#C9CD47
2× · WCAG 10.8 · ΔE 100
#08
#DDC601
2× · WCAG 10.7 · ΔE 110
#09
#DDC600
19× · WCAG 10.7 · ΔE 110
#10
#D3C672
16× · WCAG 10.6 · ΔE 86
#11
#D6AC00
12× · WCAG 8.6 · ΔE 101
#12
#E2A517
4× · WCAG 8.5 · ΔE 99
#13
#F99444
4× · WCAG 8.2 · ΔE 93
#14
#00C7C1
2× · WCAG 8.7 · ΔE 79
#15
#E87A00
3× · WCAG 6.3 · ΔE 98
#16
#C89000
26× · WCAG 6.5 · ΔE 91
#17
#FC597D
11× · WCAG 6.0 · ΔE 86
#18
#8A9098
5× · WCAG 5.7 · ΔE 53
#19
#8182E3
4× · WCAG 5.5 · ΔE 75
#20
#00A26C
1× · WCAG 5.6 · ΔE 74
#21
#009F6A
2× · WCAG 5.4 · ΔE 73
#22
#D9571F
1× · WCAG 4.7 · ΔE 88
#23
#B6760F
22× · WCAG 4.9 · ΔE 80
#24
#B4475D
2× · WCAG 3.5 · ΔE 62
#25
#00681E
2× · WCAG 2.6 · ΔE 63

HTML

26 colors
Co-occurring tokens ΔE min 1.5 · avg 67.6 318/325 pairs ≥ 12 (98%)
Background contrast ΔE min 49.8 · avg 88.0 26/26 colors ≥ 15 (100%)
#01
#FFDADE
2× · WCAG 14.4 · ΔE 85
#02
#00F7EF
50× · WCAG 13.7 · ΔE 96
#03
#4AFAB1
2× · WCAG 13.7 · ΔE 105
#04
#00F3EC
2× · WCAG 13.2 · ΔE 94
#05
#E8D44C
3× · WCAG 12.3 · ΔE 104
#06
#E2D055
6× · WCAG 11.8 · ΔE 100
#07
#65EB75
1× · WCAG 12.0 · ΔE 109
#08
#E4C157
37× · WCAG 10.6 · ΔE 93
#09
#C9CD47
2× · WCAG 10.8 · ΔE 100
#10
#DDC600
78× · WCAG 10.7 · ΔE 110
#11
#00DCF8
25× · WCAG 11.1 · ΔE 86
#12
#D3C672
4× · WCAG 10.6 · ΔE 86
#13
#A7ABFF
2× · WCAG 8.7 · ΔE 80
#14
#D6AC00
5× · WCAG 8.6 · ΔE 101
#15
#F99444
2× · WCAG 8.2 · ΔE 93
#16
#6EA3FF
2× · WCAG 7.3 · ΔE 79
#17
#E87A00
27× · WCAG 6.3 · ΔE 98
#18
#C89000
32× · WCAG 6.5 · ΔE 91
#19
#FC597D
38× · WCAG 6.0 · ΔE 86
#20
#C08A00
2× · WCAG 6.0 · ΔE 88
#21
#8A9098
1× · WCAG 5.7 · ΔE 53
#22
#00A26C
1× · WCAG 5.6 · ΔE 74
#23
#B6760F
5× · WCAG 4.9 · ΔE 80
#24
#008C6E
2× · WCAG 4.4 · ΔE 61
#25
#B93100
2× · WCAG 3.1 · ΔE 85
#26
#726A36
4× · WCAG 3.4 · ΔE 50

JSON

15 colors
Co-occurring tokens ΔE min 13.2 · avg 77.7 105/105 pairs ≥ 12 (100%)
Background contrast ΔE min 24.6 · avg 76.5 15/15 colors ≥ 15 (100%)
#01
#00F7EF
38× · WCAG 13.7 · ΔE 96
#02
#FDD34E
70× · WCAG 12.8 · ΔE 106
#03
#0CDBC3
6× · WCAG 10.5 · ΔE 88
#04
#53C491
2× · WCAG 8.5 · ΔE 81
#05
#E87A00
23× · WCAG 6.3 · ΔE 98
#06
#C89000
72× · WCAG 6.5 · ΔE 91
#07
#8A9098
35× · WCAG 5.7 · ΔE 53
#08
#4B90D7
8× · WCAG 5.5 · ΔE 66
#09
#C051C5
9× · WCAG 4.6 · ΔE 85
#10
#E05000
9× · WCAG 4.7 · ΔE 97
#11
#B6760F
10× · WCAG 4.9 · ΔE 80
#12
#5469C5
6× · WCAG 3.7 · ΔE 67
#13
#9F4D85
2× · WCAG 3.4 · ΔE 58
#14
#505900
2× · WCAG 2.4 · ΔE 55
#15
#004047
4× · WCAG 1.6 · ΔE 25

Shell

28 colors
Co-occurring tokens ΔE min 1.5 · avg 70.1 376/378 pairs ≥ 12 (99%)
Background contrast ΔE min 53.4 · avg 87.2 28/28 colors ≥ 15 (100%)
#01
#C4FD8D
23× · WCAG 15.6 · ΔE 106
#02
#ECF086
7× · WCAG 15.3 · ΔE 102
#03
#FFDADE
2× · WCAG 14.4 · ΔE 85
#04
#00F7EF
52× · WCAG 13.7 · ΔE 96
#05
#4AFAB1
8× · WCAG 13.7 · ΔE 105
#06
#00F3EC
2× · WCAG 13.2 · ΔE 94
#07
#E8D44C
14× · WCAG 12.3 · ΔE 104
#08
#E2D055
4× · WCAG 11.8 · ΔE 100
#09
#DDC600
30× · WCAG 10.7 · ΔE 110
#10
#F6A0F9
4× · WCAG 9.9 · ΔE 89
#11
#D3C672
6× · WCAG 10.6 · ΔE 86
#12
#A7ABFF
2× · WCAG 8.7 · ΔE 80
#13
#D6AC00
16× · WCAG 8.6 · ΔE 101
#14
#D4AA5D
12× · WCAG 8.5 · ΔE 81
#15
#FF8A81
4× · WCAG 8.1 · ΔE 82
#16
#53C491
6× · WCAG 8.5 · ΔE 81
#17
#F86B63
1× · WCAG 6.4 · ΔE 85
#18
#E87A00
57× · WCAG 6.3 · ΔE 98
#19
#26BA44
4× · WCAG 7.2 · ΔE 99
#20
#C89000
6× · WCAG 6.5 · ΔE 91
#21
#FC597D
3× · WCAG 6.0 · ΔE 86
#22
#8A9098
9× · WCAG 5.7 · ΔE 53
#23
#4B90D7
4× · WCAG 5.5 · ΔE 66
#24
#00A26C
20× · WCAG 5.6 · ΔE 74
#25
#6A963B
1× · WCAG 5.3 · ΔE 74
#26
#E05000
2× · WCAG 4.7 · ΔE 97
#27
#9F4D85
2× · WCAG 3.4 · ΔE 58
#28
#505900
2× · WCAG 2.4 · ΔE 55

SQL

16 colors
Co-occurring tokens ΔE min 13.9 · avg 75.0 120/120 pairs ≥ 12 (100%)
Background contrast ΔE min 48.3 · avg 87.7 16/16 colors ≥ 15 (100%)
#01
#EFF322
2× · WCAG 15.4 · ΔE 126
#02
#00F7EF
36× · WCAG 13.7 · ΔE 96
#03
#65EB75
4× · WCAG 12.0 · ΔE 109
#04
#FDABC4
2× · WCAG 10.4 · ΔE 80
#05
#DDC600
9× · WCAG 10.7 · ΔE 110
#06
#D6AC00
22× · WCAG 8.6 · ΔE 101
#07
#D4AA5D
4× · WCAG 8.5 · ΔE 81
#08
#F99444
52× · WCAG 8.2 · ΔE 93
#09
#54BBA9
24× · WCAG 8.0 · ΔE 72
#10
#E87A00
18× · WCAG 6.3 · ΔE 98
#11
#26BA44
5× · WCAG 7.2 · ΔE 99
#12
#8A9098
6× · WCAG 5.7 · ΔE 53
#13
#7977EF
6× · WCAG 5.0 · ΔE 83
#14
#00A26C
3× · WCAG 5.6 · ΔE 74
#15
#B6760F
5× · WCAG 4.9 · ΔE 80
#16
#475995
6× · WCAG 2.8 · ΔE 48