Amarelo-esverdeado é uma cor vibrante e estimulante que combina a frescura do verde com o brilho do amarelo. Ela se posiciona entre o amarelo e o verde na roda de cores, exalando uma energia calorosa e jovial. Com sua vivacidade marcante, essa cor se assemelha bastante ao chartreuse.
O amarelo-esverdeado é definido pelos seguintes códigos e valores de cor para garantir consistência em várias plataformas e dispositivos digitais.
- Código HEX: #CCFF00
- Valor RGB: 80% vermelho, 100% verde e 0% azul
Considerações de acessibilidade desempenham um papel crucial na escolha de cores no design de UX e UI. O Figma oferece plugins na Comunidade para garantir que seus designs atendam às Diretrizes de Acessibilidade de Conteúdo da Web.
Aqui estão algumas maneiras de considerar o uso do amarelo-esverdeado em designs:
- Equilibre com neutros. Para um design equilibrado e atraente, use amarelo-esverdeado com cores complementares em pequenas doses ou combine-o com tons neutros como cinza, branco ou preto. Essa abordagem cria pontos focais ou destaca informações enquanto mantém a harmonia visual.
- Evocar positividade. Use amarelo-esverdeado em fundos ou elementos para evocar frescor, crescimento e criatividade.
- Use com moderação. Dada sua intensidade, use amarelo-esverdeado com parcimônia para acentuar elementos-chave sem sobrecarregar a interface do usuário.
- Refletir a natureza. Considere o amarelo-esverdeado para branding ecológico ou interfaces relacionadas a plantas e ao ar livre. Isso pode construir confiança e criar uma sensação de consciência ambiental.
Lembre-se de que a cor e seu significado podem mudar de cultura para cultura — e a qualquer momento. Se você está projetando para um público global, pesquise considerações de cor para suas regiões específicas.
Para variações dentro do mesmo espectro vibrante e fresco do amarelo-esverdeado, considere:
- Verde-limão (#2CFF05) oferece um tom de verde ligeiramente mais saturado e puro, mantendo a vibração energética do amarelo-esverdeado.
- Chartreuse (#CCFF00) equilibra amarelo e verde, um pouco mais escuro, mas ainda capturando o espírito vibrante do amarelo-esverdeado.
- Pera (#D1E231) inclina-se um pouco mais para o amarelo, oferecendo uma alternativa mais suave e ligeiramente atenuada que retém a frescura do amarelo-esverdeado.
- Verde primavera (#00FF7F) apresenta um tom mais frio, introduzindo um pouco mais de azul para equilibrar a energia vibrante do amarelo-esverdeado.
Para complementar os tons vibrantes do amarelo-esverdeado, considere combiná-lo com:
- Violeta (#7F00FF) fornece um fundo rico e contrastante que faz o amarelo-esverdeado vibrante se destacar ainda mais.
- Azul céu (#87CEEB) introduz uma presença calma e arejada que harmoniza lindamente com o energético amarelo-esverdeado.
- Lavanda suave (#E6E6FA) oferece um contraste suave e encantador, suavizando a intensidade do amarelo-esverdeado com seus tons serenos.
- Cinza ardósia (#6D8196) é uma cor neutra e equilibrante que equilibra o brilho do amarelo-esverdeado, adequada para paletas sofisticadas.
- Creme (#FDFBD4), um tom quente e suave, complementa a vivacidade do amarelo-esverdeado, criando uma sensação leve e arejada ideal para temas de primavera e verão.
Outras cores que valem a pena considerar incluem azul-marinho para um contraste ousado e dinâmico, pêssego para uma paleta suave e complementar, e terracota para um efeito terroso e equilibrante.
Embora o amarelo-esverdeado seja versátil, ele pode entrar em conflito com:
- Rosa brilhante (#FF007F) pode ser muito avassalador quando combinado com o amarelo-esverdeado vívido, criando um efeito visual um tanto chocante.
- Laranja (#FFA500), embora seja um complemento quente, sua intensidade pode ofuscar a qualidade fresca e vibrante do amarelo-esverdeado, levando a uma paleta potencialmente conflitante.
- Azul (#0000FF) introduz uma energia ousada e elétrica que pode perturbar a vibração natural e refrescante do amarelo-esverdeado.
- Vermelho (#FF2C2C), um complemento direto, pode ser muito marcante contra o amarelo-esverdeado, especialmente em formas mais saturadas, levando a uma combinação visualmente agressiva.
- Marrom escuro (#654321), embora seja um tom terroso natural, pode atenuar o brilho do amarelo-esverdeado, resultando em um contraste menos harmonioso e atraente.
O amarelo-esverdeado simboliza juventude, energia e renovação. Evoca o otimismo e a renovação da primavera, incorporando crescimento, vitalidade e a frescura da natureza.
No entanto, é importante notar que o amarelo-esverdeado pode ter significados mistos em diferentes culturas, incluindo conotações negativas em algumas culturas (como doença, covardia ou ciúme), destacando a necessidade de aplicação cuidadosa.
No design de UI, o amarelo-esverdeado oferece uma estética dinâmica e fresca, tornando as interfaces envolventes e intuitivas. É especialmente eficaz em aplicações focadas em saúde, criatividade ou consciência ambiental, onde sua vivacidade pode incentivar a interação do usuário e transmitir o compromisso de uma marca com inovação e eco-consciência. Quando usado sabiamente, o amarelo-esverdeado pode evitar conotações negativas e infundir designs com ludicidade e criatividade, atraindo públicos jovens ou criativos.
Desde os afrescos egípcios antigos que retratam novas folhas de primavera até os tons vibrantes em pinturas impressionistas como "Ninféias" de Monet, o amarelo-esverdeado tem sido usado há muito tempo na arte e na cultura para representar o ciclo da vida e a beleza das estações em mudança.
No século 20, essa história de cor transcendeu a expressão artística. O amarelo-esverdeado ganhou popularidade na moda e no design de interiores, frequentemente associado a movimentos de vanguarda e ao desejo de trazer a vivacidade do exterior para espaços pessoais e compartilhados.
Variações de cor
Sombras
Tonalidades
Tons
Matizes
Harmonias de cores
Complementar
Dividida
Monocromática
Análoga
Triádica
Quadrado
Paletas personalizadas
Limelight
Vibrant Vortex
Island Oasis
Verificador de contraste
Contraste 1,18
- Texto grande
#CCFF00
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Reprovado | Reprovado | |
Reprovado | Reprovado | |
Reprovado | Reprovado |
Contraste 17,87
- Texto grande
#CCFF00
- Texto normal
Seu jeito de criar, alinhar e montar é importante. Faça tudo com o Figma.
| Categoria | ||
|---|---|---|
Aprovado | Aprovado | |
Aprovado | Aprovado | |
Aprovado | Aprovado |
Simulações de cor
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
A cor hexadecimal #ccff00, conhecida como amarelo-esverdeado, tem valores RGB de R:204, G:255, B:0 e valores CMYK de C:20, M:0, Y:100, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ccff00 | #ccff00 |
| RGB DECIMAL | 204, 255, 0 | RGB(204,255,0) |
| RGB PERCENTAGE | 80.0, 100.0, 0.0 | RGB(80.0%,100.0%,0.0%) |
| CMYK | 20, 0, 100, 0 | |
| HSL | HSL(72.0, 100.0%, 50.0%) | HSL(72.0, 100.0%, 50.0%) |
| HSV (OR HSB) | 72.0°, 100.0, 100.0 | |
| WEB SAFE | #2042550 | #2042550 |
| BINARY | 11001100, 11111111, 00000000 | |
| iOS - SwiftUI | Color(red: 0.800, green: 1.000, blue: 0.000) | |
| iOS - UIKit | UIColor(red: 0.800, green: 1.000, blue: 0.000, alpha: 1) | |
| Android - Compose | Color(0xFFCCFF00) |
