Light Sea Green — escala de cor em 11 passos
Light Sea Green (#20b2aa) fica no 500, intocada. Cada outro passo é Light Sea Green 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 Light Sea Green 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
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 Light Sea Green
Success, warning, error e as demais são derivadas da própria Light Sea Green 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 #20b2aa
| Sugerida | Protanopia | Deuteranopia | Tritanopia |
|---|---|---|---|
| success | 21.8 | 28.0 | 11.3 |
| warning | 23.3 | 32.0 | 55.2 |
| error | 12.1 | 6.0 | 56.7 |
| discovery | 20.7 | 14.3 | 15.6 |
| info | 15.2 | 11.5 | 3.2 |
| neutral | 19.3 | 17.3 | 23.7 |
A sugestão de info começa colidindo com Light Sea Green sob Tritanopia — ΔE₀₀ 3.2, abaixo do limiar de 11 — então o motor desloca a matiz dentro da família info até o par se separar de novo.
Exportar Light Sea Green
Os mesmos cinco formatos que o gerador produz, para esta escala. Copie qualquer bloco, ou abra a ferramenta para ajustar a escala antes.
:root {
--color-color-50: #edf9f8;
--color-color-100: #c9edeb;
--color-color-200: #a6e0dd;
--color-color-300: #82d4cf;
--color-color-400: #4dc1bb;
--color-color-500: #20b2aa;
--color-color-600: #1a8e88;
--color-color-700: #12645f;
--color-color-800: #0d4744;
--color-color-900: #082b29;
--color-color-950: #030e0e;
}$color-color-50: #edf9f8;
$color-color-100: #c9edeb;
$color-color-200: #a6e0dd;
$color-color-300: #82d4cf;
$color-color-400: #4dc1bb;
$color-color-500: #20b2aa;
$color-color-600: #1a8e88;
$color-color-700: #12645f;
$color-color-800: #0d4744;
$color-color-900: #082b29;
$color-color-950: #030e0e;export const color = {
50: '#edf9f8',
100: '#c9edeb',
200: '#a6e0dd',
300: '#82d4cf',
400: '#4dc1bb',
500: '#20b2aa',
600: '#1a8e88',
700: '#12645f',
800: '#0d4744',
900: '#082b29',
950: '#030e0e',
};{
"color": {
"50": "#edf9f8",
"100": "#c9edeb",
"200": "#a6e0dd",
"300": "#82d4cf",
"400": "#4dc1bb",
"500": "#20b2aa",
"600": "#1a8e88",
"700": "#12645f",
"800": "#0d4744",
"900": "#082b29",
"950": "#030e0e"
}
}{
"color": {
"50": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.9294117647058824,
0.9764705882352941,
0.9725490196078431
],
"alpha": 1,
"hex": "#EDF9F8"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:1",
"com.figma.isOverride": true
}
},
"100": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.788235294117647,
0.9294117647058824,
0.9215686274509803
],
"alpha": 1,
"hex": "#C9EDEB"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:2",
"com.figma.isOverride": true
}
},
"200": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.6509803921568628,
0.8784313725490196,
0.8666666666666667
],
"alpha": 1,
"hex": "#A6E0DD"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:3",
"com.figma.isOverride": true
}
},
"300": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.5098039215686274,
0.8313725490196079,
0.8117647058823529
],
"alpha": 1,
"hex": "#82D4CF"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:4",
"com.figma.isOverride": true
}
},
"400": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.30196078431372547,
0.7568627450980392,
0.7333333333333333
],
"alpha": 1,
"hex": "#4DC1BB"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:5",
"com.figma.isOverride": true
}
},
"500": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.12549019607843137,
0.6980392156862745,
0.6666666666666666
],
"alpha": 1,
"hex": "#20B2AA"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:6",
"com.figma.isOverride": true
}
},
"600": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.10196078431372549,
0.5568627450980392,
0.5333333333333333
],
"alpha": 1,
"hex": "#1A8E88"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:7",
"com.figma.isOverride": true
}
},
"700": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.07058823529411765,
0.39215686274509803,
0.37254901960784315
],
"alpha": 1,
"hex": "#12645F"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:8",
"com.figma.isOverride": true
}
},
"800": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.050980392156862744,
0.2784313725490196,
0.26666666666666666
],
"alpha": 1,
"hex": "#0D4744"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:9",
"com.figma.isOverride": true
}
},
"900": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.03137254901960784,
0.16862745098039217,
0.1607843137254902
],
"alpha": 1,
"hex": "#082B29"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:10",
"com.figma.isOverride": true
}
},
"950": {
"$type": "color",
"$value": {
"colorSpace": "srgb",
"components": [
0.011764705882352941,
0.054901960784313725,
0.054901960784313725
],
"alpha": 1,
"hex": "#030E0E"
},
"$extensions": {
"com.figma.variableId": "VariableID:1:11",
"com.figma.isOverride": true
}
}
},
"$extensions": {
"com.figma.modeName": "Value"
}
}