One place for hosting & domains

      Color

      How To Modify the Color of HTML Elements



      Part of the Series:
      How To Build a Website With HTML

      This tutorial series will guide you through creating and further customizing this website using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the beginning of the series if you wish to recreate the site.

      At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Having a knowledge of how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

      You can use HTML to modify the color of some elements and pieces of content of a webpage. For example, you can change the color of text, a border, or—as demonstrated in the tutorial on HTML Content Division—of a <div> element. The method for changing the color values of these pieces of content varies from element to element.

      In this tutorial, you will learn how to change the color of text, image borders, and <div> elements using HTML color names.

      The color of text elements, such as <p> or <h1>, is modified by using the style attribute and the color property like so:

      <p style="color:blue;">This is blue text.</p>
      

      Try writing this code in your index.html file and loading it in the browser. (If you have not been following the tutorial series, you can review instructions for setting up an index.html file in our tutorial Setting Up Your HTML Project. For instructions on loading the file in your browser, see our tutorial here.)

      You should receive something like this:

      This is blue text.

      The color of a border is modified by using the style attribute and the border property:

      <img src="https://xpresservers.com/wp-content/uploads/2020/07/How-To-Modify-the-Color-of-HTML-Elements.jpeg" style="border: 10px solid green"/>
      

      Try writing this code in your index.html file and loading it in the browser. (Note that we are using an image that we are hosting online in this example. We have also specified that the border should be 10 pixels wide and solid (as opposed to dashed)).

      You should receive something like this:

      The color of a <div> container is modified by using the style attribute and the background-color property like so:

      <div style="width:200px;height:200px;background-color:yellow;"></div>
      

      Try writing this code in your index.html file and loading it in the browser. You should receive something like this:

      In these examples, the color value is defined by color names. Try changing the color of text, image borders and

      elements using the following color names: black, white, gray, silver, purple, red, fuchsia, lime, olive, green, yellow, teal, navy, blue, maroon, and aqua.

      Note that colors can also be specified by hexadecimal values. A hexadecimal color consists of six alphanumeric digits preceded by a pound symbol, such as #0000FF (blue), #40E0D0 (turquoise), or #C0C0C0 (silver). For this tutorial series, however, we will continue using color names.

      You should now have a basic familiarity with how to change the color of text, image borders, and <div> elements using color names. We will return to colors later on the tutorial series when we begin building our website.



      Source link

      How to Choose a Color Scheme for Your Website


      Painting a room is typically all about making a relaxing and beautiful space — but those first few moments after walking into a paint store can be terribly daunting. A wall of swatches to choose from, each card only slightly different from its neighbors.

      The choice is by no means permanent, but the color should be something you’re proud of. You can go for brighter, more vibrant tones to make a splash, while others might prefer or expect a tone that’s a bit more muted. Your wall color can be bold or understated — a risk that pays off or a gamble that falls flat.

      The same goes for the colors you choose for your website. People can distinguish roughly 7 million different colors, so it might seem like long odds for finding just the right tone for your site.

      Fortunately, switching up color schemes on a website can usually be accomplished with some minor button-clicking — no last-minute runs to the hardware store for primer. Whether you’re looking for a pop of color on your walls or to drive online conversions, however, here are a few tried-and-true notions worth considering.

      Remixer, our in-house website builder, makes selecting the perfect color scheme easy. Learn more.

      What Hues Communicate to Our Brains: The Psychology of Color

      For as long as we have been creating art and building civilizations, humankind has assigned symbolic meanings to colors and explored the ways our brains perceive them.

      The ancient Egyptians mixed mineral-based pigments to infuse their art with color-based meanings: green symbolized growth, abundance, and the afterlife; red, the color of blood and fire, represented death and destructive energy, and gold was the color of the gods. The 19th-century German poet and statesman, Goethe, conducted a philosophical exploration of the color wheel, opening the door for enduring scientific color studies in the emerging field of Western psychology.

      Some studies, both anecdotal and scientific, suggest that the sight of Van Gogh’s sunflowers and McDonald’s golden arches are likely to inspire similar effects on the brain — namely, a boost in energy and joyful feelings (that the latter hopes will inspire cheerful, vivacious french fry cravings).

      Recent research indicates that up to 90 percent of today’s consumers purchase products based on color. Still not convinced? Forget about your content and product for a moment and consider this: 42 percent of online shoppers base their opinion of a website on design alone.

      Color choice matters a lot — be it on the walls of your living room, your sarcophagus, or the landing page for your blog or business.

      Gender, Age, and Cultural Upbringing May Color Our Perceptions

      We know color has an impact on our brains, but the section of the globe where you grew up — along with your age and gender — quite likely affects how you perceive color.

      Take, for instance, the way purple is perceived in the U.S., the U.K., India, and Thailand: where most people in the Western countries happily associate purple with luxury and wealth, the color represents mourning and sorrow in India and Thailand.

      Similarly, the yellow in McDonald’s golden arches — found in 120 countries and territories across the globe — is associated with happiness virtually worldwide. However, depending on where its 36,000+ restaurants are located, McDonald’s crafts its color scheme to appeal to the cultural preferences of its patrons.

      Don’t drive yourself bonkers trying to choose whether your blog should be accented with teal or lilac, but do keep in mind how your target audience may perceive those choices. For instance, men tend to gravitate toward strong, bright colors, while women typically prefer softer tones. Blues and greens are widely accepted and rather safe choices, while you may want to steer clear of oranges and browns. Younger folks tend to prefer brighter colors, but people’s preferred palettes tend to become more muted with age.

      A Spectrum of Themes for Different Means: Choosing Website Colors

      Whether for your house or your website, it’s always a good idea to make sure the structure is sound before you start slapping new paint on the walls.

      Having a solid web host is like having a team of licensed contractors and technicians on call 24/7: your host ensures the walls and joints of your site are strong and secure, the lights are on, and nothing leaks. That way, you can focus on the details and furnishings that make your guests (read: potential customers) feel comfortable and at home.

      Stressed out about choosing a color for your website? Close your eyes and picture yourself walking into a massage studio or a relaxing yoga class — or take a quick spin on Google to research local studios where you might treat yourself to a de-stress session. What do you see?

      Ahh, now that we’re in a mindset bathed, perhaps, in tranquil blues or blissful, mossy greenish-grays, we can relax and remind ourselves that our brains know what we’re doing. We’re actually wired for this.

      You can usually trust your intuition about color if you keep in mind one universal truth: every design tells a story. Our web design choices dictate our visitors’ perceptions of us, so the most important thing to consider when choosing the color scheme for yours is how do you want your story to be read?

      Legal and financial firms, for example, often want to command clients’ trust and underscore their professionalism in cool, stately grays and confident navy blues. Food bloggers and grocery stores, however, typically eschew appetite-suppressing cool blues and grays for warm and vibrant reds, oranges, and greens that stimulate the appetite.

      In other words, are you looking to give off a friendly, local farmer’s market vibe with a cornucopia of warm hues — or something sleeker and more polished, like a skyscraper on Wall Street? Will bold, disruptive colors strategically placed on crisp white backgrounds highlight your prowess as a thought leader in tech or as an innovative entrepreneur?

      Yes, choosing color may seem like a tricky business — but one of the most important choices you can make is not to overthink it.

      Color Scheming: You’ve Settled on a Dominant Color — What Next?

      Once you’ve chosen a dominant color that captures the character of your website, it’s time to zero in on the secondary color to round out your scheme. Here are the options laid out on the color wheel.

      • Monochromatic: Monochromatic schemes use a single color and explore different variants of light and saturation. While monochromatic schemes are considered easiest on the eyes, they run the risk of being bland. A well-placed splash of complementary yellow or an analogous purple can accomplish a lot, for instance, on a page awash in shades of blue.
      • Analogous: Analogous colors are next to each other on the color wheel and generally create combinations that are pleasing to the eye. Unlike monochromatic schemes, analogous colors rub shoulders with the colors adjacent to them on the wheel (picture red, orange, and yellow hues of autumn leaves intermingled on a tree). Analogous color schemes are often found in nature and typically have a harmonious effect.
      • Complementary: Complementary colors appear opposite each other on the color wheel, creating a high contrast, vibrant, attention-grabbing scheme when used together. Use them sparingly to emphasize details you want to stand out (cough *call-to-action buttons* cough).
      • Triad: Triad color schemes use colors that are spaced evenly apart on a color wheel, like the points of a triangle. Purple, green, and orange is a classic example of a triad scheme — which is best applied when one color dominates and the other two are used as accents.

      Choosing color schemes can feel overwhelming, especially when delving into more complex combinations like split-complementary and tetradic schemes — so perhaps the easiest thing to keep in mind when starting out is that some of the most visually-pleasing and effective color schemes keep it simple.

      Consider Shades and Tints when Choosing Colors that Complement

      Now that your primary color is chosen and you have a basic color scheme concept, it’s important to understand and consider other factors. Fine-tune your colorful combinations by playing with tints, tones, and shades.

      • Tint: Tints are created when you add white to any hue on the color wheel to lighten, desaturate, and dial down the color’s intensity.
      • Tone: Tones are the gray area, so to speak, between tints and shades. Tones are created by adding both black and white to the original hue to either darken or lighten it and to decrease the saturation of the original hue.
      • Shade: Shades are created by adding black to a hue, resulting in a richer, darker, and more intense color.

      Keep in mind that jarring color combinations can have an exhausting effect on the eyes. Consider a scheme with bright orange text on a bright blue background, for instance: although the colors create a high contrast, they are a literal eyesore. Tweaking shade and tone, however, evens out the color values, resulting in a visually pleasing and easily-read gold-on-navy scheme.

      Make Colors Pop Where it Matters Most for Conversions

      With 90 percent of split-second purchase decisions coming down to color, it cannot be underscored enough the vital role the hues you choose play in website conversion.

      DreamHost knows a thing or two about designing landing pages that convert. Social media outreach, reliable web hosting, and SEO optimization each play a role in funneling customers to your store or blog — but something as simple as a vibrant, attention-grabbing call-to-action button or well-placed whitespace can work wonders.

      The best landing pages aren’t busy. They’re simple, direct, and cemented in good design principles. Apply your newfound knowledge of color theory as you consider these landing page design factors and tips:

      • Does your headline stand out? Be aware of your background colors and never let your color scheme swallow your message.
      • Is your body copy readable? Don’t be afraid of basic black on white! Not only is it the most easy-to-read color combo, but it also creates a clean, minimalist feel in almost every context.
      • Is your call to action bold and alluring? If you have a clickable call to action, she’s the diva who demands attention. This is where you’ll want to make your contrasting colors pop.

      Unleash Your Inner Code-Free Design Guru with DIY Design Tools

      Perhaps by this point, you’re thinking this lesson in art history and color theory has been delightful, but who has the time or patience to spend hours tweaking a website’s color scheme?

      Thankfully, tools abound that help match and craft a color palette to your whims and wishes. Adobe Color is one of my favorites, while Colour Code provides a cursor-driven experience that lets users fly through color options. What’s more, the hex codes are readily available.

      For those who want an extraordinarily easy time of implementing a new color scheme, using a website builder is a great way to take the stress out of designing and building a page. It’s that friend you can rely on to help paint your living room without dripping paint on the baseboards or leaving accidental blotches at the edges of the ceiling.

      It’s also the best way to keep things simple. Imagine you have a managed hosting plan (remember, that’s your team of rugged contractors working around the clock to ensure the walls, plumbing, and electric wiring are solid) paired with a website builder — your own personal interior designer who’s equipped with a useful tool belt, carpentry skills, and all the paintbrushes required.

      With a website builder like DreamHost’s Remixer, no one has to be a graphic design expert or a coding whiz to build beautiful websites. Even the most indecisive among us can get started with a professionally-crafted theme, and then customize elements like colors and fonts to align with the story we want to tell.

      The Do’s and Don’ts of Choosing Colors for Your Web Page

      In web design, as in interior design or fashion, there are classic guidelines that never go out of style. Pay attention to the Do’s and Don’ts of Website Design and always consider what the colors you choose communicate.

      What do your color choices suggest about the story you want your website to tell? Do you intend to stimulate or soothe your audience? Do your color choices convey sophistication and cool professionalism, or warmth and approachability?

      How does your color scheme affect the navigability and usability of your site? Does it help direct your audience’s attention to the places that matter most — like your call to action badge? Is the text easy to read?

      Are your color choices creating an unintended Lisa Frank effect — otherwise known as a rainbow-hued sensory overload? Is the effect intended? Take a step back and think about your fluorescent chartreuse choices.

      When in doubt, keep it simple, and remember: There is always room to learn from past mistakes.



      Source link