Bottle Green and Camel Color Scheme Examples: Adjusting the Area Covered by Dark Colors

Bottle green and camel can be paired to create a palette that balances deep green with a warmer, brownish tone. But if bottle green fills most of a page, the dark background may draw more attention than the product photos or supporting information. The goal is not to give the two colors equal space; it is to adjust the amount of dark color according to what visitors need to see. Here are two examples: a product page and a campaign banner.

Decide whether dark green should dominate or support the layout

Bottle green is a deep green, while camel is a warm brown with a yellowish undertone. For these examples, we use bottle green ■#174C43 and camel ■#C19A6B. These HEX values (six-digit hexadecimal color codes used on the web) are selected design examples, not the only correct numerical definitions of the color names.

Bottle green is quite dark, so using it over a large area strongly shapes the page’s appearance. Camel is lighter and can serve as a narrow strip, a small label, or a button. The contrast ratio between these two selected colors is approximately 3.77:1. A contrast ratio measures the difference in relative brightness between colors; it does not determine whether a palette is aesthetically suitable.

The percentages below are suggested proportions of the visible color surfaces, such as backgrounds, strips, and buttons, rather than the area occupied by photographs or lettering. They are not fixed rules and should be adjusted to the amount of text and imagery.

Compare a product page with an autumn campaign banner

Example A: a leather accessories product page.Start with approximately 70% ivory, 20% bottle green, and 10% camel across the colored surfaces. Use a wide ivory ■#F7F3E9 background behind the product photos, with product names and prices in dark charcoal ■#29251F. Reserve bottle green ■#174C43 for a short heading band and the “View Product” button; place ivory ■#F7F3E9 text on the button. Apply camel ■#C19A6B to small labels such as “New” and thin decorative rules, with charcoal ■#29251F for the label text. Keeping the green area relatively small leaves more room for the products to take center stage.

The text-to-background contrast ratios in this example are approximately 13.75:1 for charcoal ■#29251F on ivory ■#F7F3E9, 8.81:1 for ivory ■#F7F3E9 on bottle green ■#174C43, and 5.88:1 for charcoal ■#29251F on camel ■#C19A6B.

Example B: an autumn promotion banner.Try roughly 55% bottle green, 35% ivory, and 10% camel as a starting balance. On the larger bottle-green ■#174C43 area at the left, set a short headline such as “Autumn Special” in ivory ■#F7F3E9. Put the date and event details in charcoal ■#29251F on the ivory ■#F7F3E9 area at the right. Use camel ■#C19A6B only for a “Learn More” button on the green area and a small divider; make the button lettering charcoal ■#29251F. The camel button surface differs from the surrounding bottle green ■#174C43 by about 3.77:1, helping identify the action against the dark background.

Adjust camel text colors and dark areas for smaller screens

Using camel ■#C19A6B as normal-sized text directly on ivory ■#F7F3E9 gives a contrast ratio of only about 2.34:1. White ■#FFFFFF lettering on a camel ■#C19A6B button reaches only about 2.59:1. Neither meets the 4.5:1 requirement for normal-sized text at WCAG (Web Content Accessibility Guidelines) 2.2 Level AA. Keep camel for smaller colored surfaces or decoration and use adequately dark lettering such as charcoal ■#29251F. The numerical criterion for large text is 3:1, although the actual font size and weight must also be checked.

On a phone, a large bottle-green area may become a long vertical block, separating the headline from the details. For Example B, stack the two colored regions and check that the headline is followed by the date and the button in a sensible reading order. If photos take up more room, reduce the length of the green band so the information remains the priority.

HueRoll lets you adjust a color using HEX input and check its contrast against white or black. It cannot compare arbitrary pairs of custom colors or automatically report WCAG pass/fail results. Verify the actual text, button, and background combinations separately in the finished design.