edubun
Português
English한국어EspañolPortuguêsFrançaisDeutschItalianoNederlandsРусскийBahasa Indonesia日本語
Início›Cor e design

Teoria das cores

Cada cor na tela pode ser descrita por três números. Neste curso, você monta o cubo RGB e o cilindro HSL em 3D, vê como as cores complementares e as em tríade se distribuem no círculo cromático, mistura luz e tinta e calcula a razão de contraste da WCAG, que indica se um texto pode ser lido.

Progresso

Sobre este curso

Na década de 1660, Isaac Newton começou a passar a luz do sol por prismas de vidro em um quarto escurecido. Ele mostrou que a luz branca é uma faixa de cores e que um segundo prisma não conseguia dividir essas cores mais ainda. Em sua Opticks, de 1704, ele curvou a faixa em um círculo, dividiu a borda em sete partes nas proporções de uma escala musical e pôs o branco no meio. Esse desenho é um dos primeiros círculos de cores, e todas as rodas de matiz deste curso descendem dele. Toda cor em uma tela são três números, e uma retina tem cerca de 6 milhões de cones de apenas três tipos.

As sete unidades começam por como vemos a cor e depois RGB e códigos hexadecimais: 256 níveis de vermelho, verde e azul dão 16 777 216 cores, cada uma um ponto dentro de um cubo. Maxwell mostrou, na Royal Institution em 1861, uma fita xadrez escocesa fotografada através de filtros vermelho, verde e azul, e o método de três canais ainda é o que toda câmera digital e toda tela usam. A unidade «Matiz, saturação e luminosidade» observa que o amarelo e o azul têm ambos luminosidade de 50% em HSL, mas o amarelo reflete quase 13 vezes mais luz que o azul. Cores complementares, análogas e em tríade são colocadas no círculo de matizes. A mistura aditiva e a subtrativa incluem o Coloritto de Jacob Christoph Le Blon, de cerca de 1722, que o Smithsonian chama de o primeiro registro das duas ideias. A razão de contraste mostra o cinza #767676 sobre branco, com 4.54:1, passando no mínimo do WCAG para texto corrido, enquanto #777777, com 4.48:1, é reprovado. A última unidade observa que cerca de 8 por cento dos homens têm deficiência de visão de cores vermelho-verde. O laboratório 3D monta o cubo RGB e o cilindro HSL.

Antes de começar

Comparar cores pelos números ajuda quando duas amostras parecem semelhantes, mas se comportam de modo diferente. As aulas apresentam RGB e códigos hexadecimais antes de HSL, relações entre cores e contraste. Observe a diferença entre misturar luz de tela e tinta, pois os mesmos nomes de cores não implicam o mesmo resultado.

Ao terminar

Você vai poder ler valores RGB e hexadecimais, ajustar matiz, saturação e luminosidade e escolher cores complementares, análogas ou triádicas. Vai distinguir mistura aditiva de luz e subtrativa de tinta, verificar a razão de contraste do texto pelas orientações WCAG e explicar por que só a cor não basta para marcar um erro em um formulário.

  1. 1Como vemos a corA retina tem cerca de 6 milhões de cones de apenas três tipos. Cada cor que você já viu resulta da combinação das respostas desses três tipos, que reagem com intensidades diferentes.
  2. 2RGB e códigos hexCom 256 níveis para cada canal, vermelho, verde e azul, uma tela pode representar 256 × 256 × 256 = 16 777 216 cores, e cada uma delas é um ponto dentro de um cubo.
  3. 3Matiz, saturação e luminosidadeNo HSL, o amarelo e o azul têm luminosidade de 50%, mas o amarelo reflete quase 13 vezes mais luz que o azul pela fórmula de luminância da WCAG.
  4. 4Cores complementares, análogas e em tríadeNo círculo cromático da tela, a complementar do azul, a 240 graus, é o amarelo, a 60 graus, enquanto no círculo do pintor o laranja fica do lado oposto ao azul.
  5. 5Mistura aditiva e subtrativaA tinta ciano em papel branco absorve a luz vermelha, então ciano e magenta impressos um sobre o outro deixam só o azul.
  6. 6Razão de contraste e texto legívelO cinza #767676 sobre branco tem razão de contraste de 4.54:1 e atende ao mínimo da WCAG para texto corrido; um tom um pouco mais claro, #777777, dá 4.48:1 e não atende ao requisito.
  7. 7Usando cor num projetoCerca de 8 por cento dos homens têm deficiência de visão de cores vermelho-verde, então um formulário que marca erros só em vermelho deixa muitos deles no escuro.

Cursos relacionados

  • Leitura de notas · Teoria musical
    Aprenda a ler as alturas na pauta: clave de sol, clave de fá, linhas suplementares, a pauta dupla, sustenidos e bemóis, e os diferentes nomes que os músicos usam para as mesmas notas. Cada unidade tem um quiz de pauta ou um teclado que você pode tocar.
  • Primeiros passos no piano · Tocar um instrumento
    Aprenda a se localizar no teclado, saiba os nomes das teclas brancas, posicione a mão direita e toque sua primeira melodia no teclado abaixo. Funciona com mouse, tela sensível ao toque ou com as teclas do computador.
  • A orquestra · História da música e apreciação
    Uma orquestra sinfônica completa pode reunir mais de 100 músicos num único palco. Passeie por um palco em 3D, escolha qualquer instrumento para ouvir uma aproximação sintetizada de seu som e ver sua extensão num teclado. Depois, faça uma melodia famosa ganhar corpo ao acrescentar uma família de instrumentos de cada vez. Sete unidades tratam da história, das quatro famílias de instrumentos, do regente e da partitura, e de como escutar.
  • Desenho em perspectiva · Desenho
    Todo desenho em perspectiva equivale a traçar uma imagem numa placa de vidro imaginária entre o seu olho e o mundo. Explore uma sala em 3D com um ponto de vista e um plano do quadro de vidro, alterne entre as vistas de um, dois e três pontos de fuga, eleve o ponto de vista e observe a linha do horizonte e os pontos de fuga se moverem.
Fontes deste curso (14)
  • W3C, Web Content Accessibility Guidelines (WCAG) 2.2, relative luminance (0.04045 threshold, note on the pre-May-2021 value 0.03928)
  • contrast ratio (L1 + 0.05) / (L2 + 0.05)
  • range 1:1 to 21:1, SC 1.4.1 Use of Color, 1.4.3 Contrast (Minimum) 4.5:1 and 3:1 for large-scale text (18 pt, or 14 pt bold)
  • 1.4.6 Contrast (Enhanced) 7:1 and 4.5:1, 1.4.11 Non-text Contrast 3:1, WCAG 2.1 published June 2018 (w3.org/TR/WCAG22/)
  • W3C, CSS Color Module Level 4, hex notation, hsl with 0deg red, 120deg green, 240deg blue, hsl(60deg 100% 50%) yellow vs hsl(240deg 100% 50%) blue at the same HSL lightness, hue spacing not perceptually uniform, HSL as a cylindrical model (w3.org/TR/css-color-4/)
  • OpenStax College Physics 2e, 26.3 Color and Color Vision: about 6 million cones of three types, red + green gives yellow, no unique set of primaries (openstax.org/books/college-physics-2e/pages/26-3-color-and-color-vision)
  • OpenStax Introduction to Behavioral Neuroscience, 6.2 The Retina: RGB pixels, CMY inks plus black, red-green colour blindness in about 8% of males (openstax.org/books/introduction-behavioral-neuroscience/pages/6-2-the-retina)
  • Smithsonian Libraries, Color in a New Light, The Science of Color: Newton's prism experiments from the 1660s, Opticks 1704, Le Blon's Coloritto (London, about 1722) and the distinction between material colours and coloured light (library.si.edu/exhibition/color-in-a-new-light/science)
  • The Newton Project (University of Oxford)
  • Opticks 1704, Book I Part II Prop. VI: colour circle divided into seven parts in musical proportion, white at the centre (newtonproject.ox.ac.uk/view/texts/normalized/NATP00034)
  • History of Information and Wikimedia Commons file record, Maxwell's 1861 Royal Institution demonstration, tartan ribbon photographed by Thomas Sutton through red, green and blue filters and projected together (historyofinformation.com/detail.php?id=3666)
  • LibreTexts, Coalinga College Drawing Basics 8.4 Color Theory: complementary, analogous, split-complementary, triadic, tetradic (human.libretexts.org)
  • RMIT Colour Theory, Interactive colour wheel and colour relationships (rmit.pressbooks.pub/colourtheory1)
  • University of Delaware Library, Graphic Design guide, Color Schemes, 60/30/10 rule (guides.lib.udel.edu/design/color).

Data de verificação: 2026-10-17