Deep Sky Blue — escala de cor em 11 passos

Deep Sky Blue (#00bfff) fica no 500, intocada. Cada outro passo é Deep Sky Blue sobre branco ou preto, com opacidade decrescente — assim a escala inteira fica na mesma família de matiz, em vez de escorregar para outra cor nas pontas.

Abrir Deep Sky Blue no gerador

8%50

24%100

40%200

56%300

80%400

100%500sua cor

80%600

56%700

40%800

24%900

8%950

Cada passo é a base sobre branco ou preto, na opacidade indicada.#00bfff

Para texto que precisa passar AA no branco, 700, 800, 900, 950 cruzam a linha de 4,5:1. Sobre um fundo escuro, são 50, 100, 200, 300, 400, 500, 600.

Cores semânticas a partir de Deep Sky Blue

Success, warning, error e as demais são derivadas da própria Deep Sky Blue e depois checadas para continuarem distinguíveis da base — e entre si — sob os três tipos de daltonismo. A distância abaixo é o CIEDE2000 depois de cada simulação.

Derivadas de #00bfff

Sugerida	Protanopia	Deuteranopia	Tritanopia
success#28cb92	39.1	36.0	7.0
warning#f5923c	50.6	55.1	58.2
error#ff8382	34.2	44.4	75.1
discovery#67b3ff	2.3	0.6	3.3
info#008a8a	24.4	22.7	19.4
neutral#73868c	23.9	22.6	23.2

Distância CIEDE2000 até a base sob cada simulação. O menor dos três é o que decide, e um ponto marca os que ficam abaixo de 11.

A sugestão de discovery começa colidindo com Deep Sky Blue sob Deuteranopia — ΔE₀₀ 0.6, abaixo do limiar de 11 — então o motor desloca a matiz dentro da família discovery até o par se separar de novo.

Exportar Deep Sky Blue

Os mesmos cinco formatos que o gerador produz, para esta escala. Copie qualquer bloco, ou abra a ferramenta para ajustar a escala antes.

CSS

:root {
  --color-color-50: #ebfaff;
  --color-color-100: #c2f0ff;
  --color-color-200: #99e5ff;
  --color-color-300: #70dbff;
  --color-color-400: #33ccff;
  --color-color-500: #00bfff;
  --color-color-600: #0099cc;
  --color-color-700: #006b8f;
  --color-color-800: #004c66;
  --color-color-900: #002e3d;
  --color-color-950: #000f14;
}

SCSS

$color-color-50: #ebfaff;
$color-color-100: #c2f0ff;
$color-color-200: #99e5ff;
$color-color-300: #70dbff;
$color-color-400: #33ccff;
$color-color-500: #00bfff;
$color-color-600: #0099cc;
$color-color-700: #006b8f;
$color-color-800: #004c66;
$color-color-900: #002e3d;
$color-color-950: #000f14;

JavaScript

export const color = {
  50: '#ebfaff',
  100: '#c2f0ff',
  200: '#99e5ff',
  300: '#70dbff',
  400: '#33ccff',
  500: '#00bfff',
  600: '#0099cc',
  700: '#006b8f',
  800: '#004c66',
  900: '#002e3d',
  950: '#000f14',
};

JSON

{
  "color": {
    "50": "#ebfaff",
    "100": "#c2f0ff",
    "200": "#99e5ff",
    "300": "#70dbff",
    "400": "#33ccff",
    "500": "#00bfff",
    "600": "#0099cc",
    "700": "#006b8f",
    "800": "#004c66",
    "900": "#002e3d",
    "950": "#000f14"
  }
}

Figma Variables

{
  "color": {
    "50": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.9215686274509803,
          0.9803921568627451,
          1
        ],
        "alpha": 1,
        "hex": "#EBFAFF"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:1",
        "com.figma.isOverride": true
      }
    },
    "100": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.7607843137254902,
          0.9411764705882353,
          1
        ],
        "alpha": 1,
        "hex": "#C2F0FF"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:2",
        "com.figma.isOverride": true
      }
    },
    "200": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.6,
          0.8980392156862745,
          1
        ],
        "alpha": 1,
        "hex": "#99E5FF"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:3",
        "com.figma.isOverride": true
      }
    },
    "300": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.4392156862745098,
          0.8588235294117647,
          1
        ],
        "alpha": 1,
        "hex": "#70DBFF"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:4",
        "com.figma.isOverride": true
      }
    },
    "400": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0.2,
          0.8,
          1
        ],
        "alpha": 1,
        "hex": "#33CCFF"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:5",
        "com.figma.isOverride": true
      }
    },
    "500": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.7490196078431373,
          1
        ],
        "alpha": 1,
        "hex": "#00BFFF"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:6",
        "com.figma.isOverride": true
      }
    },
    "600": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.6,
          0.8
        ],
        "alpha": 1,
        "hex": "#0099CC"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:7",
        "com.figma.isOverride": true
      }
    },
    "700": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.4196078431372549,
          0.5607843137254902
        ],
        "alpha": 1,
        "hex": "#006B8F"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:8",
        "com.figma.isOverride": true
      }
    },
    "800": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.2980392156862745,
          0.4
        ],
        "alpha": 1,
        "hex": "#004C66"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:9",
        "com.figma.isOverride": true
      }
    },
    "900": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.1803921568627451,
          0.23921568627450981
        ],
        "alpha": 1,
        "hex": "#002E3D"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:10",
        "com.figma.isOverride": true
      }
    },
    "950": {
      "$type": "color",
      "$value": {
        "colorSpace": "srgb",
        "components": [
          0,
          0.058823529411764705,
          0.0784313725490196
        ],
        "alpha": 1,
        "hex": "#000F14"
      },
      "$extensions": {
        "com.figma.variableId": "VariableID:1:11",
        "com.figma.isOverride": true
      }
    }
  },
  "$extensions": {
    "com.figma.modeName": "Value"
  }
}

Abrir Deep Sky Blue no gerador Como a escala é montada