SlideShare a Scribd company logo
1 of 68
Colour
 Warm colours include red, orange, and yellow, and variations of those three
colours.
 These are the colours of fire, of fall leaves, and of sunsets and sunrises, and are
generally energizing, passionate, and positive.
 Red and yellow are both primary colours, with orange falling in the middle, which
means warm colours are all truly warm and aren’t created by combining a warm
colour with a cool colour.
 Use warm colours in your designs to reflect passion, happiness, enthusiasm, and
energy.
 Red is a very hot colour. It’s associated with fire, violence, anger and warfare but
is also associated with importance.
 It’s also associated with love and passion. In history, it’s been associated with both
the Devil and Cupid. Red also indicates danger.
 Red can actually have a physical effect on people, raising blood pressure and
respiration rates. It’s been shown to enhance human metabolism, too.
 in China, red is the colour of prosperity and happiness. It can also be used to
attract good luck. In other eastern cultures, red is worn by brides on their
wedding days. In South Africa, however, red is the colour of mourning.
 Red can be very versatile, though, with brighter versions being more energetic
and darker shades being more powerful and elegant.
 It’s a great colour to use when power or passion want to be portrayed in the
design.
 Too much can have an overwhelming effect
The dark shades of red in this design give a powerful and elegant feel to the site.
The true red accents stand out against the dark black background, and give a
powerful and high-end feeling to the site.
The very bright red accents on this site give a sense of energy and movement.
The dark red on this site, because it’s combined with grunge elements, seems more
like the colour of blood.
 Orange is a very vibrant and energetic color.
 In its muted forms, it can be associated with the earth and with autumn. Because
of its association with the changing seasons, orange can represent change and
movement in general.
 Because orange is associated with the fruit of the same name, it can be associated
with health and vitality.
 In designs, orange commands attention without being as overpowering as red. It’s
often considered more friendly and inviting, and less in-your-face.
The bright orange box draws attention to its contents, even with the other bright
red elements on the page.
Orange is used here in its most obvious incarnation, to represent fire.
The orange accents here add a lot of visual interest and bring attention to the call to
action.
 Yellow is often considered the brightest and most energizing of the warm colours.
 It’s associated with happiness and sunshine.
 Yellow can also be associated with deceit and cowardice, though (calling someone
yellow is calling them a coward).
 Yellow is also associated with hope, as can be seen in some countries when yellow
ribbons are displayed by families who have loved ones at war.
 Yellow is also associated with danger, though not as strongly as red.
 In some countries, yellow has very different connotations. In Egypt, for example,
yellow is for mourning. In Japan, it represents courage, and in India it’s a color for
merchants.
 In your designs, bright yellow can lend a sense of happiness and cheerfulness.
 Softer yellows are commonly used as a gender-neutral colour for babies (rather
than blue or pink) and young children.
 Light yellows also give a more calm feeling of happiness than bright yellows.
 Dark yellows and gold-hued yellows can sometimes look antique and be used in
designs where a sense of permanence is desired.
The bright yellow header and graphics used throughout this site give a sense of
energy and positivity.
The light yellow is used almost as a neutral in the header here, and combined with
the hand-drawn illustrations gives a very cheerful impression.
The bright yellow accents bring attention to the most important parts of this site.
The bright yellow sunflower reminds visitors of summer on this site, and combined
with the antique-yellow background, it gives a homey and established feeling.
 Cool colours include green, blue, and purple, are often more subdued than warm
colours.
 They are the colours of night, of water, of nature, and are usually calming,
relaxing, and somewhat reserved.
 Blue is the only primary color within the cool spectrum, which means the other
colours are created by combining blue with a warm color (yellow for green and red
for purple).
 Greens take on some of the attributes of yellow, and purple takes on some of the
attributes of red.
 Use cool colors in your designs to give a sense of calm or professionalism.
 Green is a very down-to-earth colour.
 It can represent new beginnings and growth. It also signifies renewal and
abundance.
 Alternatively, green can also represent envy or jealousy, and a lack of experience.
 Green has many of the same calming attributes that blue has, but it also
incorporates some of the energy of yellow.
 In design, green can have a balancing and harmonizing effect, and is very stable.
 It’s appropriate for designs related to wealth, stability, renewal, and nature.
 Brighter greens are more energizing and vibrant, while olive greens are more
representative of the natural world.
 Dark greens are the most stable and representative of affluence.
The extremely muted greens of this site give it a very down-to-earth and natural
feeling
The more olive-toned green of this site gives it a natural feeling, which is very
appropriate for the content.
 The brighter, more retro-looking greens of this site give it a very fresh, energized
feeling.
 Blue is often associated with sadness in the English language.
 Blue is also used extensively to represent calmness and responsibility.
 Light blues can be refreshing and friendly.
 Dark blues are more strong and reliable.
 Blue is also associated with peace, and has spiritual and religious connotations in
many cultures and traditions (for example, the Virgin Mary is generally depicted
wearing blue robes).
 The meaning of blue is widely affected depending on the exact shade and hue. In
design, the exact shade of blue you select will have a huge impact on how your
designs are perceived.
 Light blues are often relaxed and calming.
 Bright blues can be energizing and refreshing.
 Dark blues are excellent for corporate sites or designs where strength and
reliability are important.
The dark blues give this a feeling of reliability, while the brighter and lighter blues
keep it from feeling staid.
The dark blue gives this a site a professional feeling, especially when combined with
the white background. But the lighter blue accents add a bit more interest.
The bright, sky blue of this site gives it a young and hip feeling, which is
emphasized by the reddish accents.
The light, muted blue of this site gives a very relaxed and calm impression.
 Purple was long associated with royalty.
 It’s a combination of red and blue, and takes on some attributes of both.
 It’s associated with creativity and imagination, too.
 In Thailand, purple is the colour of mourning for widows.
 Dark purples are traditionally associated with wealth and royalty, while lighter
purples (like lavender) are considered more romantic.
 In design, dark purples can give a sense wealth and luxury. Light purples are
softer and are associated with spring and romance.
The dark shade used here evokes the royal heritage of purple, which is very
appropriate for the Asprey luxury goods brand.
The light and medium purples here work well to convey a sense of creativity.
The brighter, more reddish purple of this site gives it both a rich and energetic look.
The dark purple accents on this site give a sense of luxury and refinement.
 Neutral colours often serve as the backdrop in design.
 They’re commonly combined with brighter accent colours. But they can also be
used on their own in designs, and can create very sophisticated layouts.
 The meanings and impressions of neutral colours are much more affected by the
colours that surround them than are warm and cool colours.
 Black is the strongest of the neutral colours.
 On the positive side, it’s commonly associated with power, elegance, and formality.
 On the negative side, it can be associated with evil, death, and mystery.
 Black is the traditional colour of mourning in many Western countries. It’s also
associated with rebellion in some cultures, and is associated with Halloween.
 Black is commonly used in edgier designs, as well as in very elegant designs.
 It can be either conservative or modern, traditional or unconventional, depending
on the colours it’s combined with.
 In design, black is commonly used for typography and other functional parts,
because of it’s neutrality.
 Black can make it easier to convey a sense of sophistication and mystery in a
design.
The black accents, mixed with the brighter colours and very dark brown
background add an edgier look to the overall design.
Black, when mixed with icy blues, looks colder.
The black accents here add an extra layer of sophistication and modernity to the
site.
 White is at the opposite end of the spectrum from black, but like black, it can work
well with just about any other colour.
 White is often associated with purity, cleanliness, and virtue. In the West, white is
commonly worn by brides on their wedding day.
 It’s also associated with the health care industry, especially with doctors, nurses
and dentists.
 White is associated with goodness, and angels are often depicted in white.
 In design, white is generally considered a neutral backdrop that lets other colors
in a design have a larger voice.
 It can help to convey cleanliness and simplicity, though, and is popular in
minimalist designs.
 White in designs can also portray either winter or summer, depending on the
other design motifs and colors that surround it.
The white on the Fuelhaus site is used to contrast against the electric blue.
White backgrounds are very popular on minimalistic sites, and provide great
contrast to black typography.
White combined with grey gives a soft and clean feeling to this design.
 Grey is a neutral colour, generally considered on the cool end of the color
spectrum.
 It can sometimes be considered moody or depressing.
 Light greys can be used in place of white in some designs, and dark grays can be
used in place of black.
 Grey is generally conservative and formal, but can also be modern. It is sometimes
considered a colour of mourning.
 It’s commonly used in corporate designs, where formality and professionalism are
key.
 It can be a very sophisticated colour. In design, grey backgrounds are very
common, as is grey typography.
 The dark grey background and lighter grey typography lend a decidedly modern
look to this design.
The cooler grey on this site gives a modern, sophisticated feel to the site.
 Brown is associated with the earth, wood, and stone.
 It’s a completely natural colour and a warm neutral.
 Brown can be associated with dependability and reliability, with steadfastness,
and with earthiness.
 It can also be considered dull.
 In design, brown is commonly used as a background colour.
 It’s also seen in wood textures and sometimes in stone textures.
 It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes
used in its darkest forms as a replacement for black, either in backgrounds or
typography.
 Woodgrain is a popular use of brown, and in this case the warm brown adds some
friendliness to an otherwise minimalist site.
The greyish-brown background here lends a feeling of stability and down-to-earthness.
 Beige is somewhat unique in the colour spectrum, as it can take on cool or warm
tones depending on the colours surrounding it.
 It has the warmth of brown and the coolness of white, and, like brown, is
sometimes seen as dull.
 It’s a conservative colour in most instances, and is usually reserved for
backgrounds.
 Beige in design is generally used in backgrounds, and is commonly seen in
backgrounds with a paper texture.
 It will take on the characteristics of colours around it, meaning it has little effect
in itself on the final impression a design gives when used with other colours.
The light tan background here feels young and fresh because of the bright colors
around it.
The light tan background here lends a more conservative and elegant feeling to the
overall design
Tan is popularly used as a paper-bag texture, and in its more greyish form as a
concrete or stone texture.
 Ivory and cream are sophisticated colours, with some of the warmth of brown and
a lot of the coolness of white.
 They’re generally quiet, and can often evoke a sense of history.
 Ivory is a calm colour, with some of the pureness associated with white, though it’s
a bit warmer.
 In design, ivory can lend a sense of elegance and calm to a site.
 When combined with earthy colours like peach or brown, it can take on an earthy
quality. It can also be used to lighten darker colours, without the stark contrast of
using white.
 The grayish-cream background here is made warmer by the orangish-brown
accents.
The cream background here reinforces the antique theme that runs throughout the
design’s graphics.
 Red: Passion, Love, Anger
 Orange: Energy, Happiness, Vitality
 Yellow: Happiness, Hope, Deceit
 Green: New Beginnings, Abundance, Nature
 Blue: Calm, Responsible, Sadness
 Purple: Creativity, Royalty, Wealth
 Black: Mystery, Elegance, Evil
 Gray: Moody, Conservative, Formality
 White: Purity, Cleanliness, Virtue
 Brown: Nature, Wholesomeness, Dependability
 Tan or Beige: Conservative, Piety, Dull
 Cream or Ivory: Calm, Elegant, Purity
 All rights to this presentation go to:
 http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1-
the-meaning-of-color/

More Related Content

What's hot (20)

Colour
ColourColour
Colour
 
Green
GreenGreen
Green
 
Colour pallette
Colour palletteColour pallette
Colour pallette
 
Blue roses
Blue rosesBlue roses
Blue roses
 
Colour Testing 2 for media
Colour Testing 2 for mediaColour Testing 2 for media
Colour Testing 2 for media
 
The Power of Colors on Workplace Harmony
The Power of Colors on Workplace HarmonyThe Power of Colors on Workplace Harmony
The Power of Colors on Workplace Harmony
 
презентация зелёный цвет
презентация зелёный цветпрезентация зелёный цвет
презентация зелёный цвет
 
Psychology Of Colors
Psychology Of ColorsPsychology Of Colors
Psychology Of Colors
 
effect of colors in life
effect of colors in life effect of colors in life
effect of colors in life
 
Use of Color Psychology at Home
Use of Color Psychology at Home Use of Color Psychology at Home
Use of Color Psychology at Home
 
Send Amazing Flowers from Vizagfood
Send Amazing Flowers from Vizagfood Send Amazing Flowers from Vizagfood
Send Amazing Flowers from Vizagfood
 
Colour Connotations
Colour ConnotationsColour Connotations
Colour Connotations
 
Color psychology
Color psychologyColor psychology
Color psychology
 
Funeral flowers—names and symbolism
Funeral flowers—names and symbolismFuneral flowers—names and symbolism
Funeral flowers—names and symbolism
 
The Psychology Of Color
The Psychology Of ColorThe Psychology Of Color
The Psychology Of Color
 
Color in advertising
Color in advertisingColor in advertising
Color in advertising
 
The color green
The color greenThe color green
The color green
 
Flowers of Greece
Flowers of GreeceFlowers of Greece
Flowers of Greece
 
Yellow ppt
Yellow pptYellow ppt
Yellow ppt
 
NURTURING YOUR RELATIONSHIP WITH COLORS
NURTURING YOUR RELATIONSHIP WITH COLORSNURTURING YOUR RELATIONSHIP WITH COLORS
NURTURING YOUR RELATIONSHIP WITH COLORS
 

Viewers also liked

Graphic design colour trends
Graphic design colour trendsGraphic design colour trends
Graphic design colour trendsDennis Hotson
 
Poster "Color Design on the Web" by Martha Gabriel
Poster "Color Design on the Web" by Martha GabrielPoster "Color Design on the Web" by Martha Gabriel
Poster "Color Design on the Web" by Martha GabrielMartha Gabriel
 
Design for web developers colour and layout for the artistically overwhelmed
Design for web developers   colour and layout for the artistically overwhelmedDesign for web developers   colour and layout for the artistically overwhelmed
Design for web developers colour and layout for the artistically overwhelmedxamhon
 
Understanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web DesignUnderstanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web DesignHashem Zahran
 
Uxpin web ui_design_for_the_human_eye_2
Uxpin web ui_design_for_the_human_eye_2Uxpin web ui_design_for_the_human_eye_2
Uxpin web ui_design_for_the_human_eye_2Lewis Lin 🦊
 
The Essence of Design for Startups
The Essence of Design for StartupsThe Essence of Design for Startups
The Essence of Design for StartupsArun
 
VDIS10021 Working in Digital Design - Lecture 4 - Digital Colour Management
VDIS10021 Working in Digital Design - Lecture 4 - Digital Colour ManagementVDIS10021 Working in Digital Design - Lecture 4 - Digital Colour Management
VDIS10021 Working in Digital Design - Lecture 4 - Digital Colour ManagementVirtu Institute
 
Uxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designUxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designLewis Lin 🦊
 
Color theory - Graphic Design
Color theory - Graphic DesignColor theory - Graphic Design
Color theory - Graphic DesignAbanoub Hanna
 

Viewers also liked (9)

Graphic design colour trends
Graphic design colour trendsGraphic design colour trends
Graphic design colour trends
 
Poster "Color Design on the Web" by Martha Gabriel
Poster "Color Design on the Web" by Martha GabrielPoster "Color Design on the Web" by Martha Gabriel
Poster "Color Design on the Web" by Martha Gabriel
 
Design for web developers colour and layout for the artistically overwhelmed
Design for web developers   colour and layout for the artistically overwhelmedDesign for web developers   colour and layout for the artistically overwhelmed
Design for web developers colour and layout for the artistically overwhelmed
 
Understanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web DesignUnderstanding Visual Hierarchy in Web Design
Understanding Visual Hierarchy in Web Design
 
Uxpin web ui_design_for_the_human_eye_2
Uxpin web ui_design_for_the_human_eye_2Uxpin web ui_design_for_the_human_eye_2
Uxpin web ui_design_for_the_human_eye_2
 
The Essence of Design for Startups
The Essence of Design for StartupsThe Essence of Design for Startups
The Essence of Design for Startups
 
VDIS10021 Working in Digital Design - Lecture 4 - Digital Colour Management
VDIS10021 Working in Digital Design - Lecture 4 - Digital Colour ManagementVDIS10021 Working in Digital Design - Lecture 4 - Digital Colour Management
VDIS10021 Working in Digital Design - Lecture 4 - Digital Colour Management
 
Uxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_designUxpin color theory_in_web_ui_design
Uxpin color theory_in_web_ui_design
 
Color theory - Graphic Design
Color theory - Graphic DesignColor theory - Graphic Design
Color theory - Graphic Design
 

Similar to Web design colour

Ppt Of Color Theory
Ppt Of Color TheoryPpt Of Color Theory
Ppt Of Color TheoryMustafa Ali
 
Color concept for professional designers
Color concept for professional designersColor concept for professional designers
Color concept for professional designersShahadath Hossain
 
The Cleric Scrolls II - Colors
The Cleric Scrolls II - ColorsThe Cleric Scrolls II - Colors
The Cleric Scrolls II - ColorsAlfred2323
 
Advanced Art - High School - Color Theory
Advanced Art - High School - Color TheoryAdvanced Art - High School - Color Theory
Advanced Art - High School - Color TheoryBeth Kruziki
 
Psychology of colors
Psychology of colors Psychology of colors
Psychology of colors Chic-slides
 
CMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptxCMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptxlithebemavis44
 
CMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptxCMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptxlithebemavis44
 
Meaning Of The Colors Of The Rainbow
Meaning Of The Colors Of The  RainbowMeaning Of The Colors Of The  Rainbow
Meaning Of The Colors Of The RainbowSister T.A.
 
Types of House parts in Interior Designs
Types of House parts in Interior Designs Types of House parts in Interior Designs
Types of House parts in Interior Designs Bookmy inteior
 
Introduction to Color Psychology
Introduction to Color PsychologyIntroduction to Color Psychology
Introduction to Color PsychologyImagine
 
Colors- fashion design
Colors- fashion designColors- fashion design
Colors- fashion designkellimccabe
 
Creative Color Theory Charts
Creative Color Theory ChartsCreative Color Theory Charts
Creative Color Theory Chartsmsroman
 

Similar to Web design colour (20)

Color theory
Color theoryColor theory
Color theory
 
Ppt Of Color Theory
Ppt Of Color TheoryPpt Of Color Theory
Ppt Of Color Theory
 
Color.pdf
Color.pdfColor.pdf
Color.pdf
 
Color concept for professional designers
Color concept for professional designersColor concept for professional designers
Color concept for professional designers
 
The Cleric Scrolls II - Colors
The Cleric Scrolls II - ColorsThe Cleric Scrolls II - Colors
The Cleric Scrolls II - Colors
 
Colourf
ColourfColourf
Colourf
 
Advanced Art - High School - Color Theory
Advanced Art - High School - Color TheoryAdvanced Art - High School - Color Theory
Advanced Art - High School - Color Theory
 
Psychology of colors
Psychology of colors Psychology of colors
Psychology of colors
 
Colour Connotations
Colour ConnotationsColour Connotations
Colour Connotations
 
Colors of brand
Colors of brandColors of brand
Colors of brand
 
color_theory_amp_pyschology2
color_theory_amp_pyschology2color_theory_amp_pyschology2
color_theory_amp_pyschology2
 
CMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptxCMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptx
 
CMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptxCMP 3202 PROJECT COLOR WHEEL.pptx
CMP 3202 PROJECT COLOR WHEEL.pptx
 
Meaning Of The Colors Of The Rainbow
Meaning Of The Colors Of The  RainbowMeaning Of The Colors Of The  Rainbow
Meaning Of The Colors Of The Rainbow
 
Types of House parts in Interior Designs
Types of House parts in Interior Designs Types of House parts in Interior Designs
Types of House parts in Interior Designs
 
Introduction to Color Psychology
Introduction to Color PsychologyIntroduction to Color Psychology
Introduction to Color Psychology
 
Colour Psychology
Colour PsychologyColour Psychology
Colour Psychology
 
Varsha ritu
Varsha rituVarsha ritu
Varsha ritu
 
Colors- fashion design
Colors- fashion designColors- fashion design
Colors- fashion design
 
Creative Color Theory Charts
Creative Color Theory ChartsCreative Color Theory Charts
Creative Color Theory Charts
 

More from missstevenson01

Lesson 3 - Coding with Minecraft - Variables.pptx
Lesson 3 -  Coding with Minecraft -  Variables.pptxLesson 3 -  Coding with Minecraft -  Variables.pptx
Lesson 3 - Coding with Minecraft - Variables.pptxmissstevenson01
 
Lesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptxLesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptxmissstevenson01
 
Lesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptxLesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptxmissstevenson01
 
Lesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptxLesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptxmissstevenson01
 
Ethical hacking trojans, worms and spyware
Ethical hacking    trojans, worms and spywareEthical hacking    trojans, worms and spyware
Ethical hacking trojans, worms and spywaremissstevenson01
 
Ethical hacking anti virus
Ethical hacking   anti virusEthical hacking   anti virus
Ethical hacking anti virusmissstevenson01
 
Ethical hacking introduction to ethical hacking
Ethical hacking   introduction to ethical hackingEthical hacking   introduction to ethical hacking
Ethical hacking introduction to ethical hackingmissstevenson01
 
S1 internet safety-chattingonline
S1 internet safety-chattingonlineS1 internet safety-chattingonline
S1 internet safety-chattingonlinemissstevenson01
 
Video Games and Copyright laws
Video Games and Copyright lawsVideo Games and Copyright laws
Video Games and Copyright lawsmissstevenson01
 

More from missstevenson01 (20)

S3 environment
S3 environmentS3 environment
S3 environment
 
The Processor.pptx
The Processor.pptxThe Processor.pptx
The Processor.pptx
 
How Computers Work
How Computers WorkHow Computers Work
How Computers Work
 
Lesson 3 - Coding with Minecraft - Variables.pptx
Lesson 3 -  Coding with Minecraft -  Variables.pptxLesson 3 -  Coding with Minecraft -  Variables.pptx
Lesson 3 - Coding with Minecraft - Variables.pptx
 
Lesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptxLesson 2 - Coding with Minecraft - Events.pptx
Lesson 2 - Coding with Minecraft - Events.pptx
 
Lesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptxLesson 1 - Coding with Minecraft -Introduction.pptx
Lesson 1 - Coding with Minecraft -Introduction.pptx
 
Lesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptxLesson2 - Coding with Minecraft - Events.pptx
Lesson2 - Coding with Minecraft - Events.pptx
 
Ethical hacking trojans, worms and spyware
Ethical hacking    trojans, worms and spywareEthical hacking    trojans, worms and spyware
Ethical hacking trojans, worms and spyware
 
Ethical hacking anti virus
Ethical hacking   anti virusEthical hacking   anti virus
Ethical hacking anti virus
 
Ethical hacking introduction to ethical hacking
Ethical hacking   introduction to ethical hackingEthical hacking   introduction to ethical hacking
Ethical hacking introduction to ethical hacking
 
S1 internet safety-chattingonline
S1 internet safety-chattingonlineS1 internet safety-chattingonline
S1 internet safety-chattingonline
 
S3 wireframe diagrams
S3 wireframe diagramsS3 wireframe diagrams
S3 wireframe diagrams
 
Sql
SqlSql
Sql
 
Alien database
Alien databaseAlien database
Alien database
 
Video Games and Copyright laws
Video Games and Copyright lawsVideo Games and Copyright laws
Video Games and Copyright laws
 
Games Design Document
Games Design DocumentGames Design Document
Games Design Document
 
Video game proposal
Video game proposalVideo game proposal
Video game proposal
 
Evaluation
EvaluationEvaluation
Evaluation
 
H evaluation
H evaluationH evaluation
H evaluation
 
H testing and debugging
H testing and debuggingH testing and debugging
H testing and debugging
 

Recently uploaded

Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsMiki Katsuragi
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Scott Keck-Warren
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationSlibray Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Wonjun Hwang
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024BookNet Canada
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxNavinnSomaal
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 3652toLead Limited
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piececharlottematthew16
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek SchlawackFwdays
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsMemoori
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubKalema Edgar
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfAlex Barbosa Coqueiro
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr BaganFwdays
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationRidwan Fadjar
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii SoldatenkoFwdays
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 3652toLead Limited
 

Recently uploaded (20)

Vertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering TipsVertex AI Gemini Prompt Engineering Tips
Vertex AI Gemini Prompt Engineering Tips
 
Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024Advanced Test Driven-Development @ php[tek] 2024
Advanced Test Driven-Development @ php[tek] 2024
 
Connect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck PresentationConnect Wave/ connectwave Pitch Deck Presentation
Connect Wave/ connectwave Pitch Deck Presentation
 
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
Pigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food ManufacturingPigging Solutions in Pet Food Manufacturing
Pigging Solutions in Pet Food Manufacturing
 
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
Bun (KitWorks Team Study 노별마루 발표 2024.4.22)
 
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
Transcript: New from BookNet Canada for 2024: BNC CataList - Tech Forum 2024
 
SAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptxSAP Build Work Zone - Overview L2-L3.pptx
SAP Build Work Zone - Overview L2-L3.pptx
 
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
Tech-Forward - Achieving Business Readiness For Copilot in Microsoft 365
 
Story boards and shot lists for my a level piece
Story boards and shot lists for my a level pieceStory boards and shot lists for my a level piece
Story boards and shot lists for my a level piece
 
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
"Subclassing and Composition – A Pythonic Tour of Trade-Offs", Hynek Schlawack
 
AI as an Interface for Commercial Buildings
AI as an Interface for Commercial BuildingsAI as an Interface for Commercial Buildings
AI as an Interface for Commercial Buildings
 
Unleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding ClubUnleash Your Potential - Namagunga Girls Coding Club
Unleash Your Potential - Namagunga Girls Coding Club
 
Unraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdfUnraveling Multimodality with Large Language Models.pdf
Unraveling Multimodality with Large Language Models.pdf
 
"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan"ML in Production",Oleksandr Bagan
"ML in Production",Oleksandr Bagan
 
My Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 PresentationMy Hashitalk Indonesia April 2024 Presentation
My Hashitalk Indonesia April 2024 Presentation
 
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptxE-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
E-Vehicle_Hacking_by_Parul Sharma_null_owasp.pptx
 
"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko"Debugging python applications inside k8s environment", Andrii Soldatenko
"Debugging python applications inside k8s environment", Andrii Soldatenko
 
Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365Ensuring Technical Readiness For Copilot in Microsoft 365
Ensuring Technical Readiness For Copilot in Microsoft 365
 
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort ServiceHot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
Hot Sexy call girls in Panjabi Bagh 🔝 9953056974 🔝 Delhi escort Service
 

Web design colour

  • 2.
  • 3.  Warm colours include red, orange, and yellow, and variations of those three colours.  These are the colours of fire, of fall leaves, and of sunsets and sunrises, and are generally energizing, passionate, and positive.  Red and yellow are both primary colours, with orange falling in the middle, which means warm colours are all truly warm and aren’t created by combining a warm colour with a cool colour.  Use warm colours in your designs to reflect passion, happiness, enthusiasm, and energy.
  • 4.  Red is a very hot colour. It’s associated with fire, violence, anger and warfare but is also associated with importance.  It’s also associated with love and passion. In history, it’s been associated with both the Devil and Cupid. Red also indicates danger.  Red can actually have a physical effect on people, raising blood pressure and respiration rates. It’s been shown to enhance human metabolism, too.  in China, red is the colour of prosperity and happiness. It can also be used to attract good luck. In other eastern cultures, red is worn by brides on their wedding days. In South Africa, however, red is the colour of mourning.
  • 5.  Red can be very versatile, though, with brighter versions being more energetic and darker shades being more powerful and elegant.  It’s a great colour to use when power or passion want to be portrayed in the design.  Too much can have an overwhelming effect
  • 6. The dark shades of red in this design give a powerful and elegant feel to the site.
  • 7. The true red accents stand out against the dark black background, and give a powerful and high-end feeling to the site.
  • 8. The very bright red accents on this site give a sense of energy and movement.
  • 9. The dark red on this site, because it’s combined with grunge elements, seems more like the colour of blood.
  • 10.  Orange is a very vibrant and energetic color.  In its muted forms, it can be associated with the earth and with autumn. Because of its association with the changing seasons, orange can represent change and movement in general.  Because orange is associated with the fruit of the same name, it can be associated with health and vitality.  In designs, orange commands attention without being as overpowering as red. It’s often considered more friendly and inviting, and less in-your-face.
  • 11. The bright orange box draws attention to its contents, even with the other bright red elements on the page.
  • 12. Orange is used here in its most obvious incarnation, to represent fire.
  • 13. The orange accents here add a lot of visual interest and bring attention to the call to action.
  • 14.  Yellow is often considered the brightest and most energizing of the warm colours.  It’s associated with happiness and sunshine.  Yellow can also be associated with deceit and cowardice, though (calling someone yellow is calling them a coward).  Yellow is also associated with hope, as can be seen in some countries when yellow ribbons are displayed by families who have loved ones at war.  Yellow is also associated with danger, though not as strongly as red.  In some countries, yellow has very different connotations. In Egypt, for example, yellow is for mourning. In Japan, it represents courage, and in India it’s a color for merchants.
  • 15.  In your designs, bright yellow can lend a sense of happiness and cheerfulness.  Softer yellows are commonly used as a gender-neutral colour for babies (rather than blue or pink) and young children.  Light yellows also give a more calm feeling of happiness than bright yellows.  Dark yellows and gold-hued yellows can sometimes look antique and be used in designs where a sense of permanence is desired.
  • 16. The bright yellow header and graphics used throughout this site give a sense of energy and positivity.
  • 17. The light yellow is used almost as a neutral in the header here, and combined with the hand-drawn illustrations gives a very cheerful impression.
  • 18. The bright yellow accents bring attention to the most important parts of this site.
  • 19. The bright yellow sunflower reminds visitors of summer on this site, and combined with the antique-yellow background, it gives a homey and established feeling.
  • 20.
  • 21.  Cool colours include green, blue, and purple, are often more subdued than warm colours.  They are the colours of night, of water, of nature, and are usually calming, relaxing, and somewhat reserved.  Blue is the only primary color within the cool spectrum, which means the other colours are created by combining blue with a warm color (yellow for green and red for purple).  Greens take on some of the attributes of yellow, and purple takes on some of the attributes of red.  Use cool colors in your designs to give a sense of calm or professionalism.
  • 22.  Green is a very down-to-earth colour.  It can represent new beginnings and growth. It also signifies renewal and abundance.  Alternatively, green can also represent envy or jealousy, and a lack of experience.  Green has many of the same calming attributes that blue has, but it also incorporates some of the energy of yellow.
  • 23.  In design, green can have a balancing and harmonizing effect, and is very stable.  It’s appropriate for designs related to wealth, stability, renewal, and nature.  Brighter greens are more energizing and vibrant, while olive greens are more representative of the natural world.  Dark greens are the most stable and representative of affluence.
  • 24. The extremely muted greens of this site give it a very down-to-earth and natural feeling
  • 25. The more olive-toned green of this site gives it a natural feeling, which is very appropriate for the content.
  • 26.  The brighter, more retro-looking greens of this site give it a very fresh, energized feeling.
  • 27.  Blue is often associated with sadness in the English language.  Blue is also used extensively to represent calmness and responsibility.  Light blues can be refreshing and friendly.  Dark blues are more strong and reliable.  Blue is also associated with peace, and has spiritual and religious connotations in many cultures and traditions (for example, the Virgin Mary is generally depicted wearing blue robes).
  • 28.  The meaning of blue is widely affected depending on the exact shade and hue. In design, the exact shade of blue you select will have a huge impact on how your designs are perceived.  Light blues are often relaxed and calming.  Bright blues can be energizing and refreshing.  Dark blues are excellent for corporate sites or designs where strength and reliability are important.
  • 29. The dark blues give this a feeling of reliability, while the brighter and lighter blues keep it from feeling staid.
  • 30. The dark blue gives this a site a professional feeling, especially when combined with the white background. But the lighter blue accents add a bit more interest.
  • 31. The bright, sky blue of this site gives it a young and hip feeling, which is emphasized by the reddish accents.
  • 32. The light, muted blue of this site gives a very relaxed and calm impression.
  • 33.  Purple was long associated with royalty.  It’s a combination of red and blue, and takes on some attributes of both.  It’s associated with creativity and imagination, too.  In Thailand, purple is the colour of mourning for widows.  Dark purples are traditionally associated with wealth and royalty, while lighter purples (like lavender) are considered more romantic.
  • 34.  In design, dark purples can give a sense wealth and luxury. Light purples are softer and are associated with spring and romance.
  • 35. The dark shade used here evokes the royal heritage of purple, which is very appropriate for the Asprey luxury goods brand.
  • 36. The light and medium purples here work well to convey a sense of creativity.
  • 37. The brighter, more reddish purple of this site gives it both a rich and energetic look.
  • 38. The dark purple accents on this site give a sense of luxury and refinement.
  • 39.  Neutral colours often serve as the backdrop in design.  They’re commonly combined with brighter accent colours. But they can also be used on their own in designs, and can create very sophisticated layouts.  The meanings and impressions of neutral colours are much more affected by the colours that surround them than are warm and cool colours.
  • 40.  Black is the strongest of the neutral colours.  On the positive side, it’s commonly associated with power, elegance, and formality.  On the negative side, it can be associated with evil, death, and mystery.  Black is the traditional colour of mourning in many Western countries. It’s also associated with rebellion in some cultures, and is associated with Halloween.
  • 41.  Black is commonly used in edgier designs, as well as in very elegant designs.  It can be either conservative or modern, traditional or unconventional, depending on the colours it’s combined with.  In design, black is commonly used for typography and other functional parts, because of it’s neutrality.  Black can make it easier to convey a sense of sophistication and mystery in a design.
  • 42. The black accents, mixed with the brighter colours and very dark brown background add an edgier look to the overall design.
  • 43. Black, when mixed with icy blues, looks colder.
  • 44. The black accents here add an extra layer of sophistication and modernity to the site.
  • 45.  White is at the opposite end of the spectrum from black, but like black, it can work well with just about any other colour.  White is often associated with purity, cleanliness, and virtue. In the West, white is commonly worn by brides on their wedding day.  It’s also associated with the health care industry, especially with doctors, nurses and dentists.  White is associated with goodness, and angels are often depicted in white.
  • 46.  In design, white is generally considered a neutral backdrop that lets other colors in a design have a larger voice.  It can help to convey cleanliness and simplicity, though, and is popular in minimalist designs.  White in designs can also portray either winter or summer, depending on the other design motifs and colors that surround it.
  • 47. The white on the Fuelhaus site is used to contrast against the electric blue.
  • 48. White backgrounds are very popular on minimalistic sites, and provide great contrast to black typography.
  • 49. White combined with grey gives a soft and clean feeling to this design.
  • 50.  Grey is a neutral colour, generally considered on the cool end of the color spectrum.  It can sometimes be considered moody or depressing.  Light greys can be used in place of white in some designs, and dark grays can be used in place of black.
  • 51.  Grey is generally conservative and formal, but can also be modern. It is sometimes considered a colour of mourning.  It’s commonly used in corporate designs, where formality and professionalism are key.  It can be a very sophisticated colour. In design, grey backgrounds are very common, as is grey typography.
  • 52.  The dark grey background and lighter grey typography lend a decidedly modern look to this design.
  • 53. The cooler grey on this site gives a modern, sophisticated feel to the site.
  • 54.  Brown is associated with the earth, wood, and stone.  It’s a completely natural colour and a warm neutral.  Brown can be associated with dependability and reliability, with steadfastness, and with earthiness.  It can also be considered dull.
  • 55.  In design, brown is commonly used as a background colour.  It’s also seen in wood textures and sometimes in stone textures.  It helps bring a feeling of warmth and wholesomeness to designs. It’s sometimes used in its darkest forms as a replacement for black, either in backgrounds or typography.
  • 56.  Woodgrain is a popular use of brown, and in this case the warm brown adds some friendliness to an otherwise minimalist site.
  • 57. The greyish-brown background here lends a feeling of stability and down-to-earthness.
  • 58.  Beige is somewhat unique in the colour spectrum, as it can take on cool or warm tones depending on the colours surrounding it.  It has the warmth of brown and the coolness of white, and, like brown, is sometimes seen as dull.  It’s a conservative colour in most instances, and is usually reserved for backgrounds.
  • 59.  Beige in design is generally used in backgrounds, and is commonly seen in backgrounds with a paper texture.  It will take on the characteristics of colours around it, meaning it has little effect in itself on the final impression a design gives when used with other colours.
  • 60. The light tan background here feels young and fresh because of the bright colors around it.
  • 61. The light tan background here lends a more conservative and elegant feeling to the overall design
  • 62. Tan is popularly used as a paper-bag texture, and in its more greyish form as a concrete or stone texture.
  • 63.  Ivory and cream are sophisticated colours, with some of the warmth of brown and a lot of the coolness of white.  They’re generally quiet, and can often evoke a sense of history.  Ivory is a calm colour, with some of the pureness associated with white, though it’s a bit warmer.
  • 64.  In design, ivory can lend a sense of elegance and calm to a site.  When combined with earthy colours like peach or brown, it can take on an earthy quality. It can also be used to lighten darker colours, without the stark contrast of using white.
  • 65.  The grayish-cream background here is made warmer by the orangish-brown accents.
  • 66. The cream background here reinforces the antique theme that runs throughout the design’s graphics.
  • 67.  Red: Passion, Love, Anger  Orange: Energy, Happiness, Vitality  Yellow: Happiness, Hope, Deceit  Green: New Beginnings, Abundance, Nature  Blue: Calm, Responsible, Sadness  Purple: Creativity, Royalty, Wealth  Black: Mystery, Elegance, Evil  Gray: Moody, Conservative, Formality  White: Purity, Cleanliness, Virtue  Brown: Nature, Wholesomeness, Dependability  Tan or Beige: Conservative, Piety, Dull  Cream or Ivory: Calm, Elegant, Purity
  • 68.  All rights to this presentation go to:  http://www.smashingmagazine.com/2010/01/28/color-theory-for-designers-part-1- the-meaning-of-color/