diff --git a/src/components/calcite-color-picker/calcite-color-picker.tsx b/src/components/calcite-color-picker/calcite-color-picker.tsx
index cb544e891af..c9dad91ec91 100644
--- a/src/components/calcite-color-picker/calcite-color-picker.tsx
+++ b/src/components/calcite-color-picker/calcite-color-picker.tsx
@@ -7,6 +7,7 @@ import {
   Host,
   Prop,
   State,
+  VNode,
   Watch,
 } from "@stencil/core";
 
@@ -177,19 +178,20 @@ export class CalciteColorPicker {
     this.activeColor = Color(value);
   }
 
-  colorPaletteCanvas: HTMLCanvasElement;
-  hueSliderCanvas: HTMLCanvasElement;
-
   //--------------------------------------------------------------------------
   //
   //  Internal State/Props
   //
   //--------------------------------------------------------------------------
 
+  private colorPaletteCanvas: HTMLCanvasElement;
+
+  private hueSliderCanvas: HTMLCanvasElement;
+
   @State() activeColor = defaultColor;
   @Watch("activeColor")
   handleActiveColorChange(): void {
-    this.renderCanvasParts();
+    this.drawCanvasParts();
     this.calciteColorPickerColorChange.emit();
   }
 
@@ -210,13 +212,13 @@ export class CalciteColorPicker {
   @Event()
   calciteColorPickerColorChange: EventEmitter;
 
-  handleColorModeClick = (event: Event): void => {
+  private handleColorModeClick = (event: Event): void => {
     this.mode = (event.currentTarget as HTMLElement).getAttribute(
       "data-color-mode"
     ) as ColorMode;
   };
 
-  handleHexInputChange = (event: Event): void => {
+  private handleHexInputChange = (event: Event): void => {
     event.stopPropagation();
     const { activeColor } = this;
     const input = event.target as HTMLCalciteHexInputElement;
@@ -227,12 +229,12 @@ export class CalciteColorPicker {
     }
   };
 
-  handleSavedColorSelect = (event: Event): void => {
+  private handleSavedColorSelect = (event: Event): void => {
     const swatch = event.currentTarget as HTMLCalciteColorSwatchElement;
     this.activeColor = Color(swatch.color);
   };
 
-  handleColorPartChange = (event: KeyboardEvent): void => {
+  private handleColorPartChange = (event: KeyboardEvent): void => {
     const input = event.target as HTMLInputElement;
     const partId = Number(input.getAttribute("data-color-part-id"));
 
@@ -264,7 +266,7 @@ export class CalciteColorPicker {
     this.updateDimensions(this.scale);
   }
 
-  render() {
+  render(): VNode {
     const { mode, activeColor, savedColors, theme } = this;
     const parts = this.getColorComponents();
     const partLabels =
@@ -433,11 +435,11 @@ export class CalciteColorPicker {
   //
   //--------------------------------------------------------------------------
 
-  updateDimensions(scale: Exclude<Scale, "xs" | "xl"> = "m"): void {
+  private updateDimensions(scale: Exclude<Scale, "xs" | "xl"> = "m"): void {
     this.dimensions = DIMENSIONS[scale];
   }
 
-  saveColor = (): void => {
+  private saveColor = (): void => {
     const colorToSave = this.activeColor.hex();
     const alreadySaved = this.savedColors.indexOf(colorToSave) > -1;
 
@@ -456,12 +458,12 @@ export class CalciteColorPicker {
     }
   };
 
-  renderCanvasParts(): void {
-    this.renderColorPalette();
-    this.renderHueSlider();
+  private drawCanvasParts(): void {
+    this.drawColorPalette();
+    this.drawHueSlider();
   }
 
-  private renderColorPalette(): void {
+  private drawColorPalette(): void {
     const canvas = this.colorPaletteCanvas;
     const context = canvas.getContext("2d");
     const {
@@ -490,13 +492,13 @@ export class CalciteColorPicker {
     context.fillStyle = blackGradient;
     context.fillRect(0, 0, width, height);
 
-    this.renderActiveColorPaletteColor();
+    this.drawActiveColorPaletteColor();
   }
 
   private initColorPalette = (node: HTMLCanvasElement): void => {
     this.colorPaletteCanvas = node;
     const canvas = this.colorPaletteCanvas;
-    this.renderColorPalette();
+    this.drawColorPalette();
     let trackingMouse = false;
 
     const captureColor = (x: number, y: number): void => {
@@ -532,7 +534,7 @@ export class CalciteColorPicker {
     });
   };
 
-  private renderActiveColorPaletteColor(): void {
+  private drawActiveColorPaletteColor(): void {
     const startAngle = 0;
     const endAngle = 2 * Math.PI;
 
@@ -565,7 +567,7 @@ export class CalciteColorPicker {
     context.fill();
   }
 
-  private renderActiveHueSliderColor(): void {
+  private drawActiveHueSliderColor(): void {
     const startAngle = 0;
     const endAngle = 2 * Math.PI;
 
@@ -602,7 +604,7 @@ export class CalciteColorPicker {
     this.hueSliderCanvas = node;
     const canvas = this.hueSliderCanvas;
 
-    this.renderHueSlider();
+    this.drawHueSlider();
 
     let trackingMouse = false;
 
@@ -632,7 +634,7 @@ export class CalciteColorPicker {
     });
   };
 
-  private renderHueSlider(): void {
+  private drawHueSlider(): void {
     const canvas = this.hueSliderCanvas;
     const context = canvas.getContext("2d");
     const {
@@ -664,17 +666,17 @@ export class CalciteColorPicker {
     context.fillStyle = gradient;
     context.fillRect(0, 0, width, height);
 
-    this.renderActiveHueSliderColor();
+    this.drawActiveHueSliderColor();
   }
 
-  updateColorFromParts(): void {
+  private updateColorFromParts(): void {
     this.activeColor = Color(
       [this.colorPart0, this.colorPart1, this.colorPart2],
       this.mode
     );
   }
 
-  getColorComponents(): [number, number, number] {
+  private getColorComponents(): [number, number, number] {
     const { activeColor, mode } = this;
     return activeColor[mode]()
       .array()
diff --git a/src/components/calcite-color-swatch/calcite-color-swatch.tsx b/src/components/calcite-color-swatch/calcite-color-swatch.tsx
index eee23e54c9b..877f50ccc4c 100644
--- a/src/components/calcite-color-swatch/calcite-color-swatch.tsx
+++ b/src/components/calcite-color-swatch/calcite-color-swatch.tsx
@@ -1,4 +1,4 @@
-import { Component, Prop, h, Host, Watch } from "@stencil/core";
+import { Component, Prop, h, Host, Watch, VNode } from "@stencil/core";
 import Color from "color";
 import { CSS } from "./resources";
 
@@ -7,7 +7,7 @@ const DEFAULT_COLOR = Color();
 @Component({
   tag: "calcite-color-swatch",
   styleUrl: "calcite-color-swatch.scss",
-  shadow: true
+  shadow: true,
 })
 export class CalciteColorSwatch {
   //--------------------------------------------------------------------------
@@ -33,7 +33,7 @@ export class CalciteColorSwatch {
    * Used to display whether the swatch is active or not.
    */
   @Prop({
-    reflect: true
+    reflect: true,
   })
   isActive = false;
 
@@ -43,7 +43,7 @@ export class CalciteColorSwatch {
   //
   //--------------------------------------------------------------------------
 
-  internalColor: Color;
+  private internalColor: Color;
 
   //--------------------------------------------------------------------------
   //
@@ -55,27 +55,24 @@ export class CalciteColorSwatch {
     this.internalColor = Color(this.color);
   }
 
-  render() {
+  render(): VNode {
     const { internalColor, isActive } = this;
 
     const hex = internalColor.hex();
 
     const classes = {
       [CSS.swatch]: true,
-      [CSS.swatchActive]: isActive
+      [CSS.swatchActive]: isActive,
     };
 
     const style = {
       "background-color": hex,
-      "border-color": internalColor.darken(0.25).hex()
+      "border-color": internalColor.darken(0.25).hex(),
     };
 
     return (
       <Host aria-label={hex} title={hex}>
-        <div
-          class={classes}
-          style={style}
-        />
+        <div class={classes} style={style} />
       </Host>
     );
   }
diff --git a/src/components/calcite-hex-input/calcite-hex-input.tsx b/src/components/calcite-hex-input/calcite-hex-input.tsx
index b2e74ffb8ac..86acf06e928 100644
--- a/src/components/calcite-hex-input/calcite-hex-input.tsx
+++ b/src/components/calcite-hex-input/calcite-hex-input.tsx
@@ -5,6 +5,7 @@ import {
   h,
   Prop,
   State,
+  VNode,
   Watch,
 } from "@stencil/core";
 import {
@@ -107,7 +108,7 @@ export class HexInput {
   //
   //--------------------------------------------------------------------------
 
-  render() {
+  render(): VNode {
     const hexInputValue = this.formatForInternalInput(this.value);
 
     return (
@@ -137,7 +138,7 @@ export class HexInput {
   //
   //--------------------------------------------------------------------------
 
-  onHexChange = (event: CustomEvent): void => {
+  private onHexChange = (event: CustomEvent): void => {
     const node = event.currentTarget as HTMLInputElement;
     const hex = node.value;
 
@@ -151,7 +152,7 @@ export class HexInput {
     this.calciteHexInputChange.emit();
   };
 
-  onKeyDown = (event: KeyboardEvent): void => {
+  private onKeyDown = (event: KeyboardEvent): void => {
     const { key, altKey, ctrlKey, metaKey } = event;
 
     const withModifiers = altKey || ctrlKey || metaKey;
@@ -161,7 +162,7 @@ export class HexInput {
     }
   };
 
-  onBlur = (event: FocusEvent): void => {
+  private onBlur = (event: FocusEvent): void => {
     const node = event.currentTarget as HTMLInputElement;
     const hex = `#${node.value}`;
 
@@ -175,7 +176,7 @@ export class HexInput {
     );
   };
 
-  formatForInternalInput(hex: string): string {
+  private formatForInternalInput(hex: string): string {
     return hex.replace("#", "");
   }
 }