What Colors Go with Strong Cyan? Color Pairings That Give Bold Cyan a Clear, Crisp Look [#0BDADA]

Strong Cyan (■#0BDADA) is a bright, vivid cyan that sits between blue and green. On an event or seminar registration website, it can work well for the current step, the selected date, and a primary “Next” button, helping bold cyan read as a clear accent even when the form contains many fields. Because the color surface itself has little contrast against a light background, it is better not to rely on cyan fill alone to identify buttons or progress states. Pairing it with dark text and a dark border makes the structure easier to distinguish. This example combines Strong Cyan with Mist White, Deep Slate, and Cocoa Brown.

Use Mist White as the base, then define cyan clearly with Deep Slate

One possible combination for ■#0BDADA is Mist White ■#F4FCFC for the background, Deep Slate ■#102A30 for body text, field labels, and borders, and Cocoa Brown ■#5B3A2E for secondary actions.

■#F4FCFC is a very light color with a faint blue-green cast, so it keeps a relationship with cyan while making the overall form feel light. ■#102A30 is a low-saturation dark color with a slight blue-green lean, making it suitable for field labels, explanations, and supporting error text without letting the accent color dominate every piece of information. ■#5B3A2E is a warm dark color. Its hue (the basic color family, such as red, blue, or green) is far from cyan while its saturation stays restrained, so it can separate a secondary “Back” action from the primary action.

On a registration form, concentrate Strong Cyan in the current step and primary CTA

For a concrete layout, set the overall form background to ■#F4FCFC. Use ■#0BDADA for the current step, the selected date, and the background of the primary CTA (Call to Action, a control that prompts the next step, such as continuing the form or completing registration). Set the text and an approximately 2px border to ■#102A30. The text-to-cyan contrast ratio is about 8.64:1, which exceeds the 4.5:1 minimum for normal-size text. The border color ■#102A30 against the page background ■#F4FCFC is about 14.45:1, so the control boundary remains clearly visible even when the cyan surface itself blends with the light page.

By comparison, ■#0BDADA against ■#F4FCFC is only about 1.67:1, and ■#0BDADA against ■#FFFFFF is about 1.74:1. Do not therefore use cyan fill alone as the button boundary on the light background, and do not use white for normal-size text on the cyan surface. For a secondary “Back” button, use ■#5B3A2E as the background with ■#FFFFFF text; that pair is about 10.05:1. Cocoa Brown against Mist White is also about 9.66:1, so the secondary action remains visually separate from the page background.

WCAG (Web Content Accessibility Guidelines) 2.2 requires at least 4.5:1 for normal-size text. When a meaningful UI (user interface) component such as a button or input needs a color boundary to be identifiable, at least 3:1 against the adjacent color is the relevant minimum. Because the cyan fill alone does not reach 3:1 against the light background here, this example uses a dark border and dark text as additional visual structure.

To keep the cyan clear, do not distinguish current, complete, and incomplete steps with color alone

For a form progress indicator, do not communicate “Current,” “Complete,” and “Incomplete” only by switching among cyan, brown, and white. Add step numbers, text labels, check marks, or heavier borders. In particular, ■#0BDADA against ■#F4FCFC is only about 1.67:1, so a cyan background alone can make the current step boundary difficult to distinguish.

If the primary CTA and “Back” button sit next to each other, ■#0BDADA and ■#5B3A2E have a contrast ratio of about 5.77:1. Even so, do not rely on color alone to explain what each control does; make the button labels explicit. In HueRoll, you can enter ■#0BDADA as a HEX color code (a web color notation beginning with #), then review related colors, color-scheme suggestions, and the selected color’s contrast against white and black. HueRoll does not automatically compare arbitrary pairs of colors or judge AA/AAA conformance, so the two-color contrast ratios in this article were calculated separately.