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 39 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 27 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 16 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 27 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 13 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.2%
3506 / 3535 pairs satisfy ΔE ≥ 12 · worst case ΔE = 1.9
Background contrast
100.0%
245 / 245 foreground colors satisfy ΔE ≥ 15 · worst case ΔE = 46.0

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 3.2 · avg 95.8 526/528 pairs ≥ 12 (100%)
Background contrast ΔE min 56.8 · avg 97.6 33/33 colors ≥ 15 (100%)
#01
#EDF400
1× · WCAG 16.1 · ΔE 134
#02
#FFE600
2× · WCAG 15.2 · ΔE 130
#03
#7FFF00
8× · WCAG 14.8 · ΔE 144
#04
#00FFAA
2× · WCAG 14.5 · ΔE 116
#05
#00FEAF
1× · WCAG 14.5 · ΔE 115
#06
#92F560
4× · WCAG 14.1 · ΔE 122
#07
#FFD000
4× · WCAG 13.1 · ΔE 123
#08
#00E5FF
2× · WCAG 12.5 · ΔE 91
#09
#E4C152
5× · WCAG 11.0 · ΔE 99
#10
#FE9300
16× · WCAG 8.6 · ΔE 110
#11
#FB8C8B
1× · WCAG 8.4 · ΔE 81
#12
#AAA5C8
13× · WCAG 8.2 · ΔE 66
#13
#36B1FF
2× · WCAG 8.1 · ΔE 78
#14
#FF7733
7× · WCAG 7.3 · ΔE 100
#15
#A790FF
2× · WCAG 7.4 · ΔE 83
#16
#FB6E00
2× · WCAG 6.7 · ΔE 108
#17
#9687FF
2× · WCAG 6.6 · ΔE 84
#18
#B377FF
5× · WCAG 6.4 · ΔE 91
#19
#EC5BBF
5× · WCAG 6.2 · ΔE 87
#20
#DB7E00
2× · WCAG 6.4 · ΔE 97
#21
#FF5500
1× · WCAG 6.0 · ΔE 111
#22
#999D00
2× · WCAG 6.6 · ΔE 94
#23
#FF14B8
8× · WCAG 5.5 · ΔE 102
#24
#FF007F
6× · WCAG 5.1 · ΔE 96
#25
#BA6F85
1× · WCAG 5.2 · ΔE 59
#26
#F7123D
4× · WCAG 4.7 · ΔE 100
#27
#C527F2
12× · WCAG 4.5 · ΔE 112
#28
#0087F0
4× · WCAG 5.2 · ΔE 76
#29
#009349
2× · WCAG 4.8 · ΔE 81
#30
#A200FF
2× · WCAG 3.6 · ΔE 122
#31
#008890
2× · WCAG 4.5 · ΔE 57
#32
#C9003D
2× · WCAG 3.2 · ΔE 82
#33
#945900
2× · WCAG 3.4 · ΔE 72

Python

39 colors
Co-occurring tokens ΔE min 7.7 · avg 88.0 738/741 pairs ≥ 12 (100%)
Background contrast ΔE min 61.9 · avg 94.5 39/39 colors ≥ 15 (100%)
#01
#CFFF00
10× · WCAG 16.4 · ΔE 139
#02
#FFDEE6
2× · WCAG 15.4 · ΔE 88
#03
#00FFE6
2× · WCAG 15.1 · ΔE 104
#04
#7FFF00
3× · WCAG 14.8 · ΔE 144
#05
#92F560
6× · WCAG 14.1 · ΔE 122
#06
#FFD000
9× · WCAG 13.1 · ΔE 123
#07
#00F0FF
20× · WCAG 13.6 · ΔE 95
#08
#00E5FF
12× · WCAG 12.5 · ΔE 91
#09
#A1CCFF
2× · WCAG 11.5 · ΔE 80
#10
#FF9BF2
2× · WCAG 10.3 · ΔE 89
#11
#FFB069
4× · WCAG 10.7 · ΔE 93
#12
#73C9FF
2× · WCAG 10.5 · ΔE 80
#13
#F8A500
4× · WCAG 9.5 · ΔE 111
#14
#AFC700
2× · WCAG 10.1 · ΔE 114
#15
#B7A4FF
4× · WCAG 8.9 · ΔE 80
#16
#FF8C76
1× · WCAG 8.5 · ΔE 85
#17
#FF8F55
1× · WCAG 8.5 · ΔE 93
#18
#FF8D05
4× · WCAG 8.3 · ΔE 109
#19
#AAA5C8
49× · WCAG 8.2 · ΔE 66
#20
#FF00FF
4× · WCAG 6.1 · ΔE 123
#21
#FB6E00
25× · WCAG 6.7 · ΔE 108
#22
#B9929C
3× · WCAG 7.0 · ΔE 62
#23
#FC5592
1× · WCAG 6.3 · ΔE 86
#24
#00B4A1
5× · WCAG 7.4 · ΔE 77
#25
#9687FF
4× · WCAG 6.6 · ΔE 84
#26
#B377FF
9× · WCAG 6.4 · ΔE 91
#27
#F3686B
1× · WCAG 6.4 · ΔE 83
#28
#DE7595
9× · WCAG 6.5 · ΔE 71
#29
#F26B54
6× · WCAG 6.4 · ΔE 87
#30
#00B57E
2× · WCAG 7.2 · ΔE 86
#31
#E26C69
4× · WCAG 6.0 · ΔE 76
#32
#00AD47
2× · WCAG 6.5 · ΔE 98
#33
#F04037
2× · WCAG 5.0 · ΔE 96
#34
#F7123D
1× · WCAG 4.7 · ΔE 100
#35
#CF5291
1× · WCAG 4.8 · ΔE 72
#36
#BD42E5
4× · WCAG 4.6 · ΔE 99
#37
#C527F2
4× · WCAG 4.5 · ΔE 112
#38
#0087F0
12× · WCAG 5.2 · ΔE 76
#39
#8266FF
5× · WCAG 4.8 · ΔE 94

TypeScript

39 colors
Co-occurring tokens ΔE min 1.9 · avg 90.8 734/741 pairs ≥ 12 (99%)
Background contrast ΔE min 66.2 · avg 96.4 39/39 colors ≥ 15 (100%)
#01
#CFFF00
13× · WCAG 16.4 · ΔE 139
#02
#7FFF00
12× · WCAG 14.8 · ΔE 144
#03
#77FC00
7× · WCAG 14.4 · ΔE 144
#04
#FFD000
6× · WCAG 13.1 · ΔE 123
#05
#00F0FF
22× · WCAG 13.6 · ΔE 95
#06
#00E5FF
1× · WCAG 12.5 · ΔE 91
#07
#A1CCFF
2× · WCAG 11.5 · ΔE 80
#08
#FFB425
12× · WCAG 10.8 · ΔE 111
#09
#FFA6BF
2× · WCAG 10.5 · ΔE 81
#10
#73C9FF
2× · WCAG 10.5 · ΔE 80
#11
#F8A500
2× · WCAG 9.5 · ΔE 111
#12
#AFC700
2× · WCAG 10.1 · ΔE 114
#13
#FF8F55
4× · WCAG 8.5 · ΔE 93
#14
#FF8D05
20× · WCAG 8.3 · ΔE 109
#15
#AAA5C8
41× · WCAG 8.2 · ΔE 66
#16
#FF66CC
2× · WCAG 7.3 · ΔE 91
#17
#FF00FF
8× · WCAG 6.1 · ΔE 123
#18
#FB6E00
6× · WCAG 6.7 · ΔE 108
#19
#FE00EF
7× · WCAG 5.9 · ΔE 118
#20
#CD6AEF
12× · WCAG 6.3 · ΔE 92
#21
#D378B3
4× · WCAG 6.5 · ΔE 71
#22
#9687FF
2× · WCAG 6.6 · ΔE 84
#23
#ED6794
2× · WCAG 6.4 · ΔE 78
#24
#B377FF
5× · WCAG 6.4 · ΔE 91
#25
#FF46AB
2× · WCAG 6.1 · ΔE 92
#26
#DE7595
5× · WCAG 6.5 · ΔE 71
#27
#F26B54
10× · WCAG 6.4 · ΔE 87
#28
#00B57E
2× · WCAG 7.2 · ΔE 86
#29
#00AD47
14× · WCAG 6.5 · ΔE 98
#30
#F04037
2× · WCAG 5.0 · ΔE 96
#31
#BF59B4
11× · WCAG 4.9 · ΔE 74
#32
#F7123D
7× · WCAG 4.7 · ΔE 100
#33
#C949BD
1× · WCAG 4.7 · ΔE 83
#34
#BD42E5
1× · WCAG 4.6 · ΔE 99
#35
#C527F2
3× · WCAG 4.5 · ΔE 112
#36
#EC0097
6× · WCAG 4.6 · ΔE 93
#37
#0087F0
4× · WCAG 5.2 · ΔE 76
#38
#CB326F
6× · WCAG 3.9 · ΔE 74
#39
#B64E00
10× · WCAG 3.7 · ΔE 83

Rust

27 colors
Co-occurring tokens ΔE min 1.9 · avg 91.2 347/351 pairs ≥ 12 (99%)
Background contrast ΔE min 46.0 · avg 93.6 27/27 colors ≥ 15 (100%)
#01
#7FFF00
15× · WCAG 14.8 · ΔE 144
#02
#77FC00
38× · WCAG 14.4 · ΔE 144
#03
#FFD000
31× · WCAG 13.1 · ΔE 123
#04
#00E5FF
26× · WCAG 12.5 · ΔE 91
#05
#95BAFF
2× · WCAG 9.8 · ΔE 78
#06
#AAA5C8
71× · WCAG 8.2 · ΔE 66
#07
#C89E9C
8× · WCAG 8.1 · ΔE 67
#08
#D89F00
4× · WCAG 8.1 · ΔE 102
#09
#54BBA9
8× · WCAG 8.3 · ΔE 76
#10
#FF00FF
8× · WCAG 6.1 · ΔE 123
#11
#FB6E00
10× · WCAG 6.7 · ΔE 108
#12
#B9929C
10× · WCAG 7.0 · ΔE 62
#13
#FE00EF
3× · WCAG 5.9 · ΔE 118
#14
#B377FF
13× · WCAG 6.4 · ΔE 91
#15
#F3686B
12× · WCAG 6.4 · ΔE 83
#16
#F557A9
23× · WCAG 6.2 · ΔE 86
#17
#DE7595
6× · WCAG 6.5 · ΔE 71
#18
#9FA300
6× · WCAG 7.1 · ΔE 97
#19
#F26B54
6× · WCAG 6.4 · ΔE 87
#20
#F26B00
13× · WCAG 6.3 · ΔE 105
#21
#00A384
2× · WCAG 6.0 · ΔE 74
#22
#CF00FF
3× · WCAG 4.7 · ΔE 121
#23
#FB0060
9× · WCAG 4.8 · ΔE 96
#24
#BF59B4
2× · WCAG 4.9 · ΔE 74
#25
#BD42E5
3× · WCAG 4.6 · ΔE 99
#26
#D64100
2× · WCAG 4.2 · ΔE 97
#27
#475995
2× · WCAG 2.9 · ΔE 46

CSS

25 colors
Co-occurring tokens ΔE min 7.6 · avg 93.9 297/300 pairs ≥ 12 (99%)
Background contrast ΔE min 66.2 · avg 100.1 25/25 colors ≥ 15 (100%)
#01
#CFFF00
11× · WCAG 16.4 · ΔE 139
#02
#EAF183
3× · WCAG 15.9 · ΔE 108
#03
#7FFF00
1× · WCAG 14.8 · ΔE 144
#04
#DCE246
5× · WCAG 13.7 · ΔE 116
#05
#00F0FF
6× · WCAG 13.6 · ΔE 95
#06
#00E5FF
3× · WCAG 12.5 · ΔE 91
#07
#73C9FF
2× · WCAG 10.5 · ΔE 80
#08
#FF8F55
2× · WCAG 8.5 · ΔE 93
#09
#F69463
2× · WCAG 8.5 · ΔE 87
#10
#FF8D05
2× · WCAG 8.3 · ΔE 109
#11
#AAA5C8
28× · WCAG 8.2 · ΔE 66
#12
#FF00FF
30× · WCAG 6.1 · ΔE 123
#13
#FB6E00
15× · WCAG 6.7 · ΔE 108
#14
#FE00EF
13× · WCAG 5.9 · ΔE 118
#15
#ED6794
8× · WCAG 6.4 · ΔE 78
#16
#FF567A
9× · WCAG 6.3 · ΔE 88
#17
#B377FF
22× · WCAG 6.4 · ΔE 91
#18
#F3686B
2× · WCAG 6.4 · ΔE 83
#19
#FF35C9
3× · WCAG 6.0 · ΔE 102
#20
#9FA300
4× · WCAG 7.1 · ΔE 97
#21
#00AD47
4× · WCAG 6.5 · ΔE 98
#22
#FF0040
1× · WCAG 4.9 · ΔE 103
#23
#C527F2
16× · WCAG 4.5 · ΔE 112
#24
#ED0055
2× · WCAG 4.3 · ΔE 92
#25
#B64E00
16× · WCAG 3.7 · ΔE 83

HTML

26 colors
Co-occurring tokens ΔE min 7.7 · avg 89.5 321/325 pairs ≥ 12 (99%)
Background contrast ΔE min 66.2 · avg 97.0 26/26 colors ≥ 15 (100%)
#01
#CFFF00
3× · WCAG 16.4 · ΔE 139
#02
#EAF183
1× · WCAG 15.9 · ΔE 108
#03
#7FFF00
1× · WCAG 14.8 · ΔE 144
#04
#00F0FF
2× · WCAG 13.6 · ΔE 95
#05
#00E5FF
27× · WCAG 12.5 · ΔE 91
#06
#A1CCFF
2× · WCAG 11.5 · ΔE 80
#07
#73C9FF
2× · WCAG 10.5 · ΔE 80
#08
#F8A500
2× · WCAG 9.5 · ΔE 111
#09
#FF8F55
2× · WCAG 8.5 · ΔE 93
#10
#FB8C8B
37× · WCAG 8.4 · ΔE 81
#11
#F69463
2× · WCAG 8.5 · ΔE 87
#12
#FF8D05
2× · WCAG 8.3 · ΔE 109
#13
#AAA5C8
82× · WCAG 8.2 · ΔE 66
#14
#FF00FF
6× · WCAG 6.1 · ΔE 123
#15
#FB6E00
76× · WCAG 6.7 · ΔE 108
#16
#ED6794
2× · WCAG 6.4 · ΔE 78
#17
#FF567A
3× · WCAG 6.3 · ΔE 88
#18
#B377FF
5× · WCAG 6.4 · ΔE 91
#19
#FF35C9
36× · WCAG 6.0 · ΔE 102
#20
#DE7595
2× · WCAG 6.5 · ΔE 71
#21
#00B57E
2× · WCAG 7.2 · ΔE 86
#22
#00AD47
2× · WCAG 6.5 · ΔE 98
#23
#F04037
2× · WCAG 5.0 · ΔE 96
#24
#FF0040
5× · WCAG 4.9 · ΔE 103
#25
#C527F2
27× · WCAG 4.5 · ΔE 112
#26
#B64E00
4× · WCAG 3.7 · ΔE 83

JSON

16 colors
Co-occurring tokens ΔE min 6.7 · avg 89.2 119/120 pairs ≥ 12 (99%)
Background contrast ΔE min 56.8 · avg 89.4 16/16 colors ≥ 15 (100%)
#01
#00E5FF
23× · WCAG 12.5 · ΔE 91
#02
#FFB069
9× · WCAG 10.7 · ΔE 93
#03
#FE9300
70× · WCAG 8.6 · ΔE 110
#04
#AAA5C8
11× · WCAG 8.2 · ΔE 66
#05
#A790FF
2× · WCAG 7.4 · ΔE 83
#06
#FB6E00
38× · WCAG 6.7 · ΔE 108
#07
#9687FF
9× · WCAG 6.6 · ΔE 84
#08
#B377FF
10× · WCAG 6.4 · ΔE 91
#09
#DB7E00
6× · WCAG 6.4 · ΔE 97
#10
#00B26B
4× · WCAG 6.9 · ΔE 89
#11
#999D00
2× · WCAG 6.6 · ΔE 94
#12
#FF14B8
35× · WCAG 5.5 · ΔE 102
#13
#C527F2
61× · WCAG 4.5 · ΔE 112
#14
#009349
6× · WCAG 4.8 · ΔE 81
#15
#008890
8× · WCAG 4.5 · ΔE 57
#16
#945900
2× · WCAG 3.4 · ΔE 72

Shell

27 colors
Co-occurring tokens ΔE min 1.9 · avg 91.3 346/351 pairs ≥ 12 (99%)
Background contrast ΔE min 56.8 · avg 95.0 27/27 colors ≥ 15 (100%)
#01
#FFD9E2
4× · WCAG 14.9 · ΔE 87
#02
#7FFF00
8× · WCAG 14.8 · ΔE 144
#03
#77FC00
14× · WCAG 14.4 · ΔE 144
#04
#92F560
4× · WCAG 14.1 · ΔE 122
#05
#00E5FF
55× · WCAG 12.5 · ΔE 91
#06
#FFB425
23× · WCAG 10.8 · ΔE 111
#07
#FFB069
2× · WCAG 10.7 · ΔE 93
#08
#73C9FF
2× · WCAG 10.5 · ΔE 80
#09
#FF8D05
2× · WCAG 8.3 · ΔE 109
#10
#AAA5C8
50× · WCAG 8.2 · ΔE 66
#11
#FF66CC
4× · WCAG 7.3 · ΔE 91
#12
#A790FF
2× · WCAG 7.4 · ΔE 83
#13
#FF00FF
6× · WCAG 6.1 · ΔE 123
#14
#FB6E00
70× · WCAG 6.7 · ΔE 108
#15
#FE00EF
7× · WCAG 5.9 · ΔE 118
#16
#ED6794
3× · WCAG 6.4 · ΔE 78
#17
#DE7595
8× · WCAG 6.5 · ΔE 71
#18
#999D00
6× · WCAG 6.6 · ΔE 94
#19
#00AD47
2× · WCAG 6.5 · ΔE 98
#20
#FF0040
12× · WCAG 4.9 · ΔE 103
#21
#BF59B4
4× · WCAG 4.9 · ΔE 74
#22
#C527F2
1× · WCAG 4.5 · ΔE 112
#23
#E23B7D
1× · WCAG 4.7 · ΔE 81
#24
#D4507F
1× · WCAG 4.8 · ΔE 72
#25
#008890
4× · WCAG 4.5 · ΔE 57
#26
#B64E00
6× · WCAG 3.7 · ΔE 83
#27
#945900
2× · WCAG 3.4 · ΔE 72

SQL

13 colors
Co-occurring tokens ΔE min 29.2 · avg 85.5 78/78 pairs ≥ 12 (100%)
Background contrast ΔE min 46.0 · avg 89.3 13/13 colors ≥ 15 (100%)
#01
#EAF183
52× · WCAG 15.9 · ΔE 108
#02
#7FFF00
3× · WCAG 14.8 · ΔE 144
#03
#00E5FF
18× · WCAG 12.5 · ΔE 91
#04
#FDABC4
2× · WCAG 10.8 · ΔE 80
#05
#AAA5C8
19× · WCAG 8.2 · ΔE 66
#06
#54BBA9
24× · WCAG 8.3 · ΔE 76
#07
#FB6E00
58× · WCAG 6.7 · ΔE 108
#08
#FC5592
2× · WCAG 6.3 · ΔE 86
#09
#B377FF
5× · WCAG 6.4 · ΔE 91
#10
#F26B54
6× · WCAG 6.4 · ΔE 87
#11
#FF0040
4× · WCAG 4.9 · ΔE 103
#12
#BF59B4
5× · WCAG 4.9 · ΔE 74
#13
#475995
6× · WCAG 2.9 · ΔE 46