Markdown

example.md 31 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 31 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 35 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 29 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 23 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 24 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 13 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 18 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%
3024 / 3042 pairs satisfy ΔE ≥ 12 · worst case ΔE = 3.4
Background contrast
100.0%
231 / 231 foreground colors satisfy ΔE ≥ 15 · worst case ΔE = 49.8

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

31 colors
Co-occurring tokens ΔE min 8.9 · avg 81.9 464/465 pairs ≥ 12 (100%)
Background contrast ΔE min 63.9 · avg 90.3 31/31 colors ≥ 15 (100%)
#01
#F0EBFF
2× · WCAG 17.3 · ΔE 93
#02
#EBF265
2× · WCAG 16.7 · ΔE 113
#03
#FFD076
15× · WCAG 14.0 · ΔE 98
#04
#00F5F9
5× · WCAG 14.8 · ΔE 99
#05
#F9D600
2× · WCAG 14.1 · ΔE 120
#06
#CBDD72
2× · WCAG 13.6 · ΔE 99
#07
#00F35C
8× · WCAG 13.4 · ΔE 127
#08
#FFA287
2× · WCAG 10.3 · ΔE 84
#09
#FFA048
2× · WCAG 10.0 · ΔE 96
#10
#F0989C
5× · WCAG 9.3 · ΔE 78
#11
#FF80BC
4× · WCAG 8.7 · ΔE 87
#12
#00C2E4
2× · WCAG 9.5 · ΔE 82
#13
#A8A098
8× · WCAG 7.8 · ΔE 65
#14
#00AAF1
2× · WCAG 7.7 · ΔE 80
#15
#EB58CC
6× · WCAG 6.5 · ΔE 96
#16
#D861EA
1× · WCAG 6.6 · ΔE 101
#17
#FF586D
4× · WCAG 6.6 · ΔE 90
#18
#B49A00
1× · WCAG 7.3 · ΔE 91
#19
#AC6CE3
4× · WCAG 5.8 · ΔE 89
#20
#6C9700
7× · WCAG 5.8 · ΔE 88
#21
#C73ADC
2× · WCAG 4.9 · ΔE 105
#22
#E14E1D
4× · WCAG 5.1 · ΔE 93
#23
#EA1695
21× · WCAG 4.8 · ΔE 95
#24
#C76A00
2× · WCAG 5.3 · ΔE 86
#25
#F7004C
1× · WCAG 4.9 · ΔE 98
#26
#0095A3
2× · WCAG 5.6 · ΔE 64
#27
#009678
2× · WCAG 5.4 · ΔE 68
#28
#BB5335
1× · WCAG 4.2 · ΔE 71
#29
#926A00
8× · WCAG 4.1 · ΔE 71
#30
#085EFF
5× · WCAG 3.9 · ΔE 105
#31
#8C5A00
2× · WCAG 3.4 · ΔE 66

Python

31 colors
Co-occurring tokens ΔE min 8.4 · avg 74.5 461/465 pairs ≥ 12 (99%)
Background contrast ΔE min 64.3 · avg 90.6 31/31 colors ≥ 15 (100%)
#01
#E9F09C
2× · WCAG 16.7 · ΔE 100
#02
#C5FF64
4× · WCAG 17.2 · ΔE 120
#03
#EBF265
4× · WCAG 16.7 · ΔE 113
#04
#FFD076
70× · WCAG 14.0 · ΔE 98
#05
#00FBCB
4× · WCAG 15.0 · ΔE 106
#06
#00F35C
1× · WCAG 13.4 · ΔE 127
#07
#EFBB53
2× · WCAG 11.4 · ΔE 96
#08
#FAB700
9× · WCAG 11.4 · ΔE 111
#09
#FFAC94
1× · WCAG 11.1 · ΔE 84
#10
#73D882
4× · WCAG 11.4 · ΔE 96
#11
#FFA048
28× · WCAG 10.0 · ΔE 96
#12
#FF80BC
6× · WCAG 8.7 · ΔE 87
#13
#ACA7F1
5× · WCAG 9.2 · ΔE 81
#14
#FF8193
2× · WCAG 8.5 · ΔE 84
#15
#E089E0
12× · WCAG 8.5 · ΔE 87
#16
#A8A098
3× · WCAG 7.8 · ΔE 65
#17
#00AAF1
26× · WCAG 7.7 · ΔE 80
#18
#B8958B
12× · WCAG 7.4 · ΔE 64
#19
#DE7F4D
2× · WCAG 7.0 · ΔE 80
#20
#E67B00
1× · WCAG 6.9 · ΔE 98
#21
#EA7634
3× · WCAG 6.9 · ΔE 90
#22
#D3720D
8× · WCAG 5.9 · ΔE 89
#23
#4582FB
1× · WCAG 5.6 · ΔE 89
#24
#6C9700
3× · WCAG 5.8 · ΔE 88
#25
#EA1695
9× · WCAG 4.8 · ΔE 95
#26
#D55B36
1× · WCAG 5.2 · ΔE 81
#27
#8366FF
4× · WCAG 5.1 · ΔE 102
#28
#C16E24
4× · WCAG 5.3 · ΔE 78
#29
#BC6E57
5× · WCAG 5.3 · ΔE 65
#30
#7471D8
2× · WCAG 4.9 · ΔE 79
#31
#BD451E
5× · WCAG 3.9 · ΔE 78

TypeScript

35 colors
Co-occurring tokens ΔE min 4.7 · avg 72.1 587/595 pairs ≥ 12 (99%)
Background contrast ΔE min 64.3 · avg 91.9 35/35 colors ≥ 15 (100%)
#01
#CBFFC6
2× · WCAG 17.9 · ΔE 100
#02
#EAEDFF
2× · WCAG 17.3 · ΔE 93
#03
#AFFFB7
6× · WCAG 17.1 · ΔE 103
#04
#EBF265
2× · WCAG 16.7 · ΔE 113
#05
#FFDCD1
2× · WCAG 15.8 · ΔE 89
#06
#FFD468
12× · WCAG 14.3 · ΔE 102
#07
#FFD076
12× · WCAG 14.0 · ΔE 98
#08
#00FBCB
1× · WCAG 15.0 · ΔE 106
#09
#ECD14D
2× · WCAG 13.3 · ΔE 105
#10
#00ECBF
7× · WCAG 13.2 · ΔE 101
#11
#00F35C
4× · WCAG 13.4 · ΔE 127
#12
#FF9EE6
7× · WCAG 10.8 · ΔE 90
#13
#FFAC94
7× · WCAG 11.1 · ΔE 84
#14
#73D882
2× · WCAG 11.4 · ΔE 96
#15
#FFA048
14× · WCAG 10.0 · ΔE 96
#16
#FF987A
6× · WCAG 9.6 · ΔE 85
#17
#FF80BC
10× · WCAG 8.7 · ΔE 87
#18
#FF85A0
2× · WCAG 8.8 · ΔE 84
#19
#E089E0
20× · WCAG 8.5 · ΔE 87
#20
#FF7700
11× · WCAG 7.6 · ΔE 107
#21
#A8A098
8× · WCAG 7.8 · ΔE 65
#22
#00AAF1
43× · WCAG 7.7 · ΔE 80
#23
#B8958B
4× · WCAG 7.4 · ΔE 64
#24
#FF44B4
2× · WCAG 6.5 · ΔE 99
#25
#FA50A9
1× · WCAG 6.5 · ΔE 93
#26
#F66C00
12× · WCAG 6.8 · ΔE 104
#27
#FF5C52
2× · WCAG 6.6 · ΔE 93
#28
#D3720D
14× · WCAG 5.9 · ΔE 89
#29
#6C9700
16× · WCAG 5.8 · ΔE 88
#30
#EA1695
7× · WCAG 4.8 · ΔE 95
#31
#E74500
10× · WCAG 5.0 · ΔE 101
#32
#C16E24
20× · WCAG 5.3 · ΔE 78
#33
#00978E
2× · WCAG 5.6 · ΔE 65
#34
#BD451E
6× · WCAG 3.9 · ΔE 78
#35
#9E4B00
2× · WCAG 3.3 · ΔE 71

Rust

29 colors
Co-occurring tokens ΔE min 5.9 · avg 81.5 404/406 pairs ≥ 12 (100%)
Background contrast ΔE min 52.9 · avg 87.1 29/29 colors ≥ 15 (100%)
#01
#FFD076
9× · WCAG 14.0 · ΔE 98
#02
#00ECBF
38× · WCAG 13.2 · ΔE 101
#03
#FAB700
10× · WCAG 11.4 · ΔE 111
#04
#FF9EE6
3× · WCAG 10.8 · ΔE 90
#05
#FFA048
26× · WCAG 10.0 · ΔE 96
#06
#FF80BC
6× · WCAG 8.7 · ΔE 87
#07
#B4BA00
2× · WCAG 9.6 · ΔE 104
#08
#54BBA9
8× · WCAG 8.7 · ΔE 76
#09
#FF7700
8× · WCAG 7.6 · ΔE 107
#10
#A8A098
16× · WCAG 7.8 · ΔE 65
#11
#00AAF1
14× · WCAG 7.7 · ΔE 80
#12
#FF44B4
4× · WCAG 6.5 · ΔE 99
#13
#E67B00
12× · WCAG 6.9 · ΔE 98
#14
#EA7634
6× · WCAG 6.9 · ΔE 90
#15
#00A4A6
2× · WCAG 6.6 · ΔE 70
#16
#FF3300
31× · WCAG 5.5 · ΔE 112
#17
#A163E8
3× · WCAG 5.3 · ΔE 94
#18
#6C9700
15× · WCAG 5.8 · ΔE 88
#19
#EA1695
13× · WCAG 4.8 · ΔE 95
#20
#C16E24
32× · WCAG 5.3 · ΔE 78
#21
#E5284F
17× · WCAG 4.6 · ΔE 89
#22
#BD451E
4× · WCAG 3.9 · ΔE 78
#23
#704EE8
11× · WCAG 3.8 · ΔE 100
#24
#D30140
8× · WCAG 3.7 · ΔE 86
#25
#00856A
9× · WCAG 4.4 · ΔE 61
#26
#008931
23× · WCAG 4.4 · ΔE 79
#27
#6B6700
2× · WCAG 3.4 · ΔE 64
#28
#475995
2× · WCAG 3.0 · ΔE 53
#29
#8F0086
2× · WCAG 2.4 · ΔE 78

CSS

23 colors
Co-occurring tokens ΔE min 3.4 · avg 80.3 252/253 pairs ≥ 12 (100%)
Background contrast ΔE min 49.8 · avg 88.1 23/23 colors ≥ 15 (100%)
#01
#FFD076
32× · WCAG 14.0 · ΔE 98
#02
#00F35C
2× · WCAG 13.4 · ΔE 127
#03
#FF9EE6
13× · WCAG 10.8 · ΔE 90
#04
#FFA048
14× · WCAG 10.0 · ΔE 96
#05
#A8A098
5× · WCAG 7.8 · ΔE 65
#06
#FF5C89
4× · WCAG 6.9 · ΔE 89
#07
#00AAF1
21× · WCAG 7.7 · ΔE 80
#08
#F74BD5
4× · WCAG 6.7 · ΔE 104
#09
#F66C00
8× · WCAG 6.8 · ΔE 104
#10
#E67B00
2× · WCAG 6.9 · ΔE 98
#11
#AA71DB
2× · WCAG 5.9 · ΔE 84
#12
#6C9700
1× · WCAG 5.8 · ΔE 88
#13
#ED3154
2× · WCAG 5.0 · ΔE 90
#14
#F4006C
9× · WCAG 4.9 · ΔE 95
#15
#EA1695
22× · WCAG 4.8 · ΔE 95
#16
#8366FF
9× · WCAG 5.1 · ΔE 102
#17
#E74500
16× · WCAG 5.0 · ΔE 101
#18
#9C8500
5× · WCAG 5.5 · ΔE 81
#19
#669000
2× · WCAG 5.3 · ΔE 85
#20
#BD451E
28× · WCAG 3.9 · ΔE 78
#21
#926A00
3× · WCAG 4.1 · ΔE 71
#22
#006F85
4× · WCAG 3.5 · ΔE 50
#23
#6F4F00
2× · WCAG 2.7 · ΔE 56

HTML

24 colors
Co-occurring tokens ΔE min 15.4 · avg 79.3 276/276 pairs ≥ 12 (100%)
Background contrast ΔE min 64.6 · avg 91.5 24/24 colors ≥ 15 (100%)
#01
#EAEDFF
2× · WCAG 17.3 · ΔE 93
#02
#FFD076
84× · WCAG 14.0 · ΔE 98
#03
#ECD14D
2× · WCAG 13.3 · ΔE 105
#04
#00F35C
2× · WCAG 13.4 · ΔE 127
#05
#EBB4F3
25× · WCAG 11.9 · ΔE 87
#06
#73D882
2× · WCAG 11.4 · ΔE 96
#07
#FFA048
30× · WCAG 10.0 · ΔE 96
#08
#F69800
4× · WCAG 9.0 · ΔE 105
#09
#E089E0
2× · WCAG 8.5 · ΔE 87
#10
#A8A098
1× · WCAG 7.8 · ΔE 65
#11
#00AAF1
78× · WCAG 7.7 · ΔE 80
#12
#F74BD5
2× · WCAG 6.7 · ΔE 104
#13
#F66C00
3× · WCAG 6.8 · ΔE 104
#14
#B49A00
37× · WCAG 7.3 · ΔE 91
#15
#D3720D
2× · WCAG 5.9 · ΔE 89
#16
#ED3154
2× · WCAG 5.0 · ΔE 90
#17
#F4006C
3× · WCAG 4.9 · ΔE 95
#18
#EA1695
5× · WCAG 4.8 · ΔE 95
#19
#8366FF
1× · WCAG 5.1 · ΔE 102
#20
#E74500
4× · WCAG 5.0 · ΔE 101
#21
#00978E
2× · WCAG 5.6 · ΔE 65
#22
#BD451E
6× · WCAG 3.9 · ΔE 78
#23
#926A00
36× · WCAG 4.1 · ΔE 71
#24
#9E4B00
2× · WCAG 3.3 · ΔE 71

JSON

13 colors
Co-occurring tokens ΔE min 17.4 · avg 77.4 78/78 pairs ≥ 12 (100%)
Background contrast ΔE min 63.9 · avg 89.4 13/13 colors ≥ 15 (100%)
#01
#C5FF64
9× · WCAG 17.2 · ΔE 120
#02
#EBF265
9× · WCAG 16.7 · ΔE 113
#03
#FFD076
72× · WCAG 14.0 · ΔE 98
#04
#CBDD72
6× · WCAG 13.6 · ΔE 99
#05
#FFA287
2× · WCAG 10.3 · ΔE 84
#06
#FFA048
23× · WCAG 10.0 · ΔE 96
#07
#00C2E4
2× · WCAG 9.5 · ΔE 82
#08
#80ADFF
4× · WCAG 9.0 · ΔE 83
#09
#AC6CE3
46× · WCAG 5.8 · ΔE 89
#10
#EA1695
80× · WCAG 4.8 · ΔE 95
#11
#0095A3
6× · WCAG 5.6 · ΔE 64
#12
#009678
2× · WCAG 5.4 · ΔE 68
#13
#926A00
35× · WCAG 4.1 · ΔE 71

Shell

27 colors
Co-occurring tokens ΔE min 8.2 · avg 82.3 350/351 pairs ≥ 12 (100%)
Background contrast ΔE min 64.6 · avg 94.0 27/27 colors ≥ 15 (100%)
#01
#C5FF64
2× · WCAG 17.2 · ΔE 120
#02
#7CFF91
4× · WCAG 15.9 · ΔE 114
#03
#FFD468
23× · WCAG 14.3 · ΔE 102
#04
#FFD076
58× · WCAG 14.0 · ΔE 98
#05
#00ECBF
14× · WCAG 13.2 · ΔE 101
#06
#00F35C
16× · WCAG 13.4 · ΔE 127
#07
#FAB700
3× · WCAG 11.4 · ΔE 111
#08
#FF9EE6
7× · WCAG 10.8 · ΔE 90
#09
#73D882
2× · WCAG 11.4 · ΔE 96
#10
#FFA287
2× · WCAG 10.3 · ΔE 84
#11
#FFA048
57× · WCAG 10.0 · ΔE 96
#12
#B4BA00
4× · WCAG 9.6 · ΔE 104
#13
#00C2E4
6× · WCAG 9.5 · ΔE 82
#14
#E089E0
2× · WCAG 8.5 · ΔE 87
#15
#A8A098
9× · WCAG 7.8 · ΔE 65
#16
#00AAF1
30× · WCAG 7.7 · ΔE 80
#17
#F66C00
20× · WCAG 6.8 · ΔE 104
#18
#AC6CE3
4× · WCAG 5.8 · ΔE 89
#19
#D3720D
2× · WCAG 5.9 · ΔE 89
#20
#FF3322
8× · WCAG 5.5 · ΔE 107
#21
#CA4EAF
1× · WCAG 5.0 · ΔE 83
#22
#EA1695
4× · WCAG 4.8 · ΔE 95
#23
#B956C9
1× · WCAG 5.0 · ΔE 87
#24
#E74500
6× · WCAG 5.0 · ΔE 101
#25
#C16E24
12× · WCAG 5.3 · ΔE 78
#26
#009678
2× · WCAG 5.4 · ΔE 68
#27
#BD451E
4× · WCAG 3.9 · ΔE 78

SQL

18 colors
Co-occurring tokens ΔE min 8.4 · avg 74.4 152/153 pairs ≥ 12 (99%)
Background contrast ΔE min 52.9 · avg 90.0 18/18 colors ≥ 15 (100%)
#01
#FFD076
36× · WCAG 14.0 · ΔE 98
#02
#00F35C
22× · WCAG 13.4 · ΔE 127
#03
#FDABC4
2× · WCAG 11.3 · ΔE 83
#04
#FAB700
22× · WCAG 11.4 · ΔE 111
#05
#FFA048
18× · WCAG 10.0 · ΔE 96
#06
#B4BA00
5× · WCAG 9.6 · ΔE 104
#07
#54BBA9
24× · WCAG 8.7 · ΔE 76
#08
#FF7733
12× · WCAG 7.6 · ΔE 98
#09
#FF7700
18× · WCAG 7.6 · ΔE 107
#10
#A8A098
6× · WCAG 7.8 · ΔE 65
#11
#00AAF1
9× · WCAG 7.7 · ΔE 80
#12
#FF2244
4× · WCAG 5.3 · ΔE 101
#13
#6C9700
3× · WCAG 5.8 · ΔE 88
#14
#EA1695
5× · WCAG 4.8 · ΔE 95
#15
#D55B36
2× · WCAG 5.2 · ΔE 81
#16
#C16E24
4× · WCAG 5.3 · ΔE 78
#17
#BD451E
6× · WCAG 3.9 · ΔE 78
#18
#475995
6× · WCAG 3.0 · ΔE 53